# Accordion

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

## Example

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.

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.

    <!-- Accordion -->
    <div id="accordione">
      <!-- list -->
      <div class="relative flex flex-wrap flex-col 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 justify-between focus:outline-none focus:ring-0 text-left" data-type="collapse" data-target="#accordion1">
          How to make an accordion with Tailwind?
        </button>
        <div id="accordion1" data-type="collapsed" class="active [&.active]:block hidden">
          <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 flex-col 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 justify-between focus:outline-none focus:ring-0 text-left" data-type="collapse" data-target="#accordion2">
          How do you open an Material accordion?
        </button>
        <div id="accordion2" data-type="collapsed" class="[&.active]:block hidden">
          <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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts