Currently, I am tackling the challenge of creating a box that can expand and collapse using regular JavaScript (without relying on jQuery). My main roadblock lies in figuring out how to effectively detect dynamically added elements or classes to elements after the initial page load.
To see an example of my issue, you can visit this JS Fiddle page: http://jsfiddle.net/1a518a4t/3/
Upon visiting the provided link, you'll notice that the collapse feature works initially, but fails to function properly upon trying to collapse again.
Here is the snippet of JavaScript code involved:
function test() {
var badge = document.getElementById('test');
var close_button = document.querySelector('.test-close');
close_button.addEventListener("click", close_box);
function close_box() {
badge.style.bottom = '-70px';
close_button.classList.add("test-open");
close_button.classList.remove("test-close");
var open_button = document.querySelector('.test-open');
open_button.addEventListener("click", open_box);
}
function open_box() {
badge.style.bottom = '0';
close_button.classList.remove("test-open");
close_button.classList.add("test-close");
}
}
window.onload = test;
My ultimate goal is to uncover how I can replicate jQuery's on method in pure JavaScript. This method is crucial for handling dynamically created elements post-page load.