Document Classlist
The design and operation of the tempusfugit.me.uk website relies heavily on the manipulation of DOM Classes.
The menu systems used on this site have been adapted from examples taken from the W3C Schools reference and example templates expanded to yield what you are seeing now.
The pages of this website are based on a reasonably complex Document Object Model the classes of which determine how the site looks and operates.
For example the document.classlist property and its manipulation are key to how the side-bar menu operates.
The code that I was trying to dissect:
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 classList property
The classList property came to my attention when I was looking at the code for the accordian (expandable page sections) technique. The classList is used to extract classes from the accordian object (or perhaps element) and eventListeners are added to them.
The DOM classlist property is described on the W3C website:
The classList property returns the class name(s) of an element, as a DOMTokenList object.
This property is useful to add, remove and toggle CSS classes on an element.
The classList property is read-only, however, you can modify it by using the add() and remove() methods.
The toggle() method is shown in the example below:
The W3C Example
Click the button to toggle between two classes.
Note: The classList property is not supported in Internet Explorer 9 and earlier versions.
The code that does the business:
function myFunction() {
document.getElementById("myDIV").classList.toggle("newClassName");
}