JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="accordion">
  <div class="accordion-item expanded">
    <div class="accordion-header">
      <h3>Book 1</h3>
      <span class="accordion-toggle">-</span>
    </div>
    <div class="accordion-content">
      <p>Description for Book 1.</p>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Book 2</h3>
      <span class="accordion-toggle">+</span>
    </div>
    <div class="accordion-content">
      <p>Description for Book 2.</p>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Book 3</h3>
      <span class="accordion-toggle">+</span>
    </div>
    <div class="accordion-content">
      <p>Description for Book 3.</p>
    </div>
  </div>
</div>

<input type="checkbox" id="multiple-toggle">
<label for="multiple-toggle">Multiple</label>

CSS

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-toggle {
  font-weight: bold;
}

.expanded .accordion-toggle:before {
  content: "-";
}

.collapsed .accordion-toggle:before {
  content: "+";
}

JavaScript

const accordionItems = document.querySelectorAll('.accordion-item');
const multipleToggle = document.getElementById('multiple-toggle');

accordionItems.forEach(item => {
  const header = item.querySelector('.accordion-header');
  const content = item.querySelector('.accordion-content');

  header.addEventListener('click', () => {
    if (!multipleToggle.checked) {
      accordionItems.forEach(accItem => {
        if (accItem !== item) {
          accItem.classList.remove('expanded');
          accItem.classList.add('collapsed');
          accItem.querySelector('.accordion-content').style.display = 'none';
        }
      });
    }

    item.classList.toggle('expanded');
    item.classList.toggle('collapsed');
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });
});