HTML DOM classList Property

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 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.

I am a DIV element

The code that does the business:

function myFunction() {
  document.getElementById("myDIV").classList.toggle("newClassName");
}

Links

External Sources

HTML DOM classList Property