Easy HTML Accordian

Every website needs an accordian at one time. Here's how to do an easy one

See the working demo below.

Demo: How to create a Easy HTML Accordian

JavaScript

This is pretty much the standard JavaScript you'll paste into your page script block - or in a .js file if you prefer.

It attaches an event listener to elements with the class name accordion, and toggles them

           
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
              acc[i].addEventListener("click", function() {
                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                this.classList.toggle("active");

                /* Toggle between hiding and showing the active panel */
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                  panel.style.display = "none";
                } else {
                  panel.style.display = "block";
                }
              });
            } 
        
    

CSS

Edit as necessary.

           
            .accordion {
              background-color: #eee;
              color: #444;
              cursor: pointer;
              padding: 18px;
              width: 100%;
              text-align: left;
              border: none;
              outline: none;
              transition: 0.4s;
            }

            .active, .accordion:hover {
              background-color: #ccc;
            }

            .panel {
              padding: 0 18px;
              background-color: white;
              display: none;
              overflow: hidden;
            }
        
    

Conclusion

A few lines of JQuery and some CSS is all you need to make an easy html accordian