Creating an Accordion Component with HTML, CSS, and JavaScript: Single-Item Open Behavior Tutorial

HTML:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Section 1</div>
    <div class="accordion-content">
      <p>Content for Section 1 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 2</div>
    <div class="accordion-content">
      <p>Content for Section 2 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 3</div>
    <div class="accordion-content">
      <p>Content for Section 3 goes here.</p>
    </div>
  </div>
</div>

CSS:

.accordion {
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .accordion-item {
    border-bottom: 1px solid #ccc;
  }
  
  .accordion-header {
    cursor: pointer;
    padding: 10px;
    background-color: #f9f9f9;
    font-weight: bold;
  }
  
  .accordion-content {
    padding: 10px;
    display: none;
  }

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var accordionHeaders = document.querySelectorAll('.accordion-header');
  
  accordionHeaders.forEach(function(header) {
    header.addEventListener('click', function() {
      this.classList.toggle('active');
      var content = this.nextElementSibling;
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  });
});

In this example, the HTML structure consists of an accordion container (<div class="accordion">) with multiple accordion items (<div class="accordion-item">). Each accordion item has a header (<div class="accordion-header">) and content (<div class="accordion-content">). The CSS provides basic styling for the accordion, and the JavaScript adds interactivity by toggling the display of the accordion content when the corresponding header is clicked. The active class is added to the header to indicate the active state. You can customize the styling and behavior further to suit your needs.

Here’s an updated Javascript of the accordion component with the behavior that only one item remains open at a time:

document.addEventListener('DOMContentLoaded', function() {
  var accordionHeaders = document.querySelectorAll('.accordion-header');
  
  accordionHeaders.forEach(function(header) {
    header.addEventListener('click', function() {
      var accordionItem = this.parentElement;
      var accordionContent = accordionItem.querySelector('.accordion-content');
      var isExpanded = accordionItem.classList.contains('active');
      
      // Close all accordion items
      accordionHeaders.forEach(function(header) {
        var item = header.parentElement;
        var content = item.querySelector('.accordion-content');
        
        if (item !== accordionItem && item.classList.contains('active')) {
          item.classList.remove('active');
          content.style.display = 'none';
        }
      });
      
      // Toggle current accordion item
      if (isExpanded) {
        accordionItem.classList.remove('active');
        accordionContent.style.display = 'none';
      } else {
        accordionItem.classList.add('active');
        accordionContent.style.display = 'block';
      }
    });
  });
});

In this updated version, when a header is clicked to expand an accordion item, any previously expanded accordion item will be closed automatically by removing the active class and hiding the content. Only one item can be expanded at a time, as indicated by the behavior of closing all other items before toggling the current item.