Accordion

Build vertically collapsing accordions in combination with Alpinejs. The accordion uses collapse internally to make it collapsible.

Example

                
<!-- Accordion -->
<div x-data="{ accordion: 1 }" id="accordione">
  <!-- list -->
  <div class="relative flex flex-wrap oskasdadiaa shadow mb-4 bg-white dark:bg-gray-800">
    <button
      class="active py-3 px-4 w-full border-b border-gray-100 mb-0 bg-surface-200 dark:bg-surfacedark-200 dark:border-gray-700 rounded-t text-title-md flex qesolakmsjd focus:outline-none focus:ring-0 text-start"
      @click="accordion !== 1 ? accordion = 1 : accordion = null">
      How to make an accordion with Tailwind?
    </button>

    <div id="accordion1" x-show="accordion == 1" style="display:none;" class="relative">
      <div class="flex-1 p-6 text-body-lg text-gray-600 dark:text-gray-400">
        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </div>
    </div>
  </div>

  <!-- list -->
  <div class="relative flex flex-wrap oskasdadiaa shadow mb-4 bg-white dark:bg-gray-800">
    <button
      class="py-3 px-4 w-full border-b border-gray-100 mb-0 bg-surface-200 dark:bg-surfacedark-200 dark:border-gray-700 rounded-t text-title-md flex qesolakmsjd focus:outline-none focus:ring-0 text-start"
      @click="accordion !== 2 ? accordion = 2 : accordion = null">
      How do you open an Material accordion?
    </button>

    <div id="accordion2" x-show="accordion == 2" style="display:none;" class="relative">
      <div class="flex-1 p-6 text-body-lg text-gray-600 dark:text-gray-400">
        <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      </div>
    </div>
  </div>
</div>