Tailwind CSS Accordion - Versoly UI

Accordions show a brief summary and expand to show additional content.

Added in 1.0 JS Required

Examples

<div class="accordion">
  <div class="accordion-item">
      <button class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 1</button>
      <div class="accordion-collapse hidden">
          <div class="accordion-body">
              <p>This is the first item's accordion body.</p>
          </div>
      </div>
  </div>
  <div class="accordion-item">
      <button class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 2</button>
      <div class="accordion-collapse hidden">
          <div class="accordion-body">
              <p>This is the second item's accordion body.</p>
          </div>
      </div>
  </div>
  <div class="accordion-item">
      <button class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 3</button>
      <div class="accordion-collapse hidden">
          <div class="accordion-body">
              <p>This is the third item's accordion body.</p>
          </div>
      </div>
  </div>
</div>