Accordion menus expand and collapse when a user clicks a button.

Description: 

  It’s a great way to not have to show all the info about a topic up front, and instead give users the option to show only what they need. First we need to create Lists. For each list in the menu, we will have two divs – one for the label, the other for the content. Without CSS, our page will look all bare. We want our accordion menu to look good. Time to bring some CSS into play. I’ve added some css classes and added some comments in the code to explain what each piece is doing. Now we need to start doing some work on the inside to set up its functionality. First, we set the position property for each of the containers (holding both the label and content) to relative.The next action will be to append a little ‘+’ sign at the end of each list. This will let users know that they can expand the section to learn/see more.We will achieve this using the ::before selector. The ::before and ::after selector is used to place content before of or after a specified element. Here, we are inserting ‘+’ before the label. But we will use the offset properties top and right to place it at the far right corner.Adding JavaScript to our Accordion At this point, our accordion is pretty much static. To make a container display the content when a user clicks on it, we will need to bring in some JavaScript.This script will access all of our lists by class name of container. Then we will loop through the list. For each container, we simply want to register an event listener to it. When it gets clicked, we want to toggle the class “active” on that element.There is one last thing we need to do. We need to create an active class within a style sheet. We will define how we want our accordion to look once JavaScript toggles the class on a container.

Code for modification:

// ---- ---- Const ---- ---- //
const accordionContent = document.querySelectorAll('.accordion-content');
 
// ---- ---- Class .open ---- ---- //
accordionContent.forEach((item, index) => {
  let header = item.querySelector('.header');
  header.addEventListener('click', () => {
    item.classList.toggle('open');
 
    // ---- ---- Height Description and Change Icon ---- ---- //
    let description = item.querySelector('.description');
    if (item.classList.contains('open')) {
      description.style.height = `${description.scrollHeight}px`;
      item.querySelector('i').classList.replace('fa-plus', 'fa-minus');
    } else {
      description.style.height = '0px';
      item.querySelector('i').classList.replace('fa-minus', 'fa-plus');
    }
    removeOpen(index);
  });
});
 
function removeOpen(index1) {
  accordionContent.forEach((item2, index2) => {
    if (index1 != index2) {
      item2.classList.remove('open');
      let descr = item2.querySelector('.description');
      descr.style.height = '0px';
      item2.querySelector('i').classList.replace('fa-minus', 'fa-plus');
    }
  });
}

Output: