The JavaScript that controls the accordian
I love the way that the W3C page says "now add the Javascript" to the example of how to build an accordian
The code for the accordian is contained in the accordian structure below:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
The first thing is to "collect" all of the elements with the ClassName = "accordian".
This is achieved using the getElementsByClassName() method. This returns a HTML Collection.
The pseudo array is then transversed and eventListeners are added as required.
The original example uses Bubbling
At first I thought that there was a usage of Bubbling and Capturing by the setting of the third parameter.
I tried adding a third parameter to use Capturing on the script on this page. It works in the same way.
This leaves me in the same postion relating showing an an example where there is a requirement to use Capturing instead of bubbling - perhaps the Page Search using JSON uses Capturing - I need to check
The JSON search uses Bubbling as well!!!!!