JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Section 1</h3>
    </div>
    <div class="accordion-content">
      <p>Content for section 1.</p>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Section 2</h3>
    </div>
    <div class="accordion-content">
      <p>Content for section 2.</p>
    </div>
  </div>
</div>

CSS

/* Mobile styles (Accordion enabled) */
.accordion-content {
  display: none;
}

.accordion-header.active + .accordion-content {
  display: block;
}

/* Desktop styles (Accordion disabled) */
@media (min-width: 768px) {
  .accordion-item {
    display: block;
  }

  .accordion-content {
    display: block !important;
  }

  .accordion-header {
    cursor: default;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const headers = document.querySelectorAll('.accordion-header');

  headers.forEach(header => {
    header.addEventListener('click', function() {
      if (window.innerWidth < 768) {
        this.classList.toggle('active');
        const content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      }
    });
  });
});