How To Make Accordion Expandable List Collapsible List Css

Have you ever wanted to create a collapsible list using CSS? Well, you’re in luck because I’m here to show you how to make an accordion-style expandable and collapsible list using CSS. This technique is perfect for organizing information and optimizing the space on your website.

Getting Started

Before we dive into the code, let’s go over what an accordion list is. An accordion list is a vertical list of items where only one item is expanded at a time. When you click on an item, it expands to show its content, and any other item that was previously expanded collapses. This creates a neat and organized layout that is user-friendly.

Now, let’s start by writing the HTML structure of our accordion list. We will use an unordered list (<ul>) with list items (<li>) as our individual items. Inside each list item, we’ll have a heading (<h3>) and a content div (<div>). Here’s an example:

<ul class="accordion-list">
  <li>
    <h3>Item 1</h3>
    <div>Content for Item 1</div>
  </li>
  <li>
    <h3>Item 2</h3>
    <div>Content for Item 2</div>
  </li>
  ...
</ul>

Styling the Accordion List

Now that we have the basic structure, let’s add some CSS to make our accordion list functional and visually appealing. First, we’ll hide the content divs by default, except for the first one that we want to be expanded initially:

.accordion-list li:not(:first-child) div {
  display: none;
}

Next, we’ll style the heading and content sections. We’ll use some padding and margin to give them some space and make them look nice. We’ll also add a border to the heading and set it to a different color when expanded:

.accordion-list h3 {
  padding: 10px;
  margin: 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.accordion-list h3.active {
  background-color: #ccc;
}

.accordion-list div {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

Adding JavaScript Functionality

Now that our accordion list looks good, let’s add the JavaScript functionality to make it expand and collapse on click. We’ll start by selecting all the heading elements and adding an event listener to each one:

const headings = document.querySelectorAll('.accordion-list h3');

headings.forEach((heading) => {
  heading.addEventListener('click', () => {
    // Collapse all other items
    headings.forEach((otherHeading) => {
      if (otherHeading !== heading) {
        otherHeading.classList.remove('active');
        otherHeading.nextElementSibling.style.display = 'none';
      }
    });

    // Toggle the clicked item
    heading.classList.toggle('active');
    heading.nextElementSibling.style.display = heading.nextElementSibling.style.display === 'none' ? 'block' : 'none';
  });
});

With this JavaScript code, we’re using the classList property to toggle the ‘active’ class on the clicked heading. We’re also toggling the display property of the next element sibling, which is the content div, between ‘block’ and ‘none’ to expand and collapse the item.

Conclusion

Creating an accordion-style expandable and collapsible list using CSS can greatly enhance the organization and usability of your website. By following the steps outlined in this article, you now have the knowledge to implement an accordion list on your own. Feel free to customize the styling and functionality to fit your specific needs. Happy coding!