Dashpro | Tailwind Admin Template

Accordion

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

Default Accordion

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.

    		                
<div id="Accordione" x-data="{selected:0}">
  <!-- list -->
  <div class="relative flex flex-wrap ioajsklehsnm shadow mb-4 bg-white dark:bg-gray-900">
    <div class="border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-20 dark:border-gray-800 py-2 uajskeiolksb" id="HeadingOnee">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0"  @click="selected !== 0 ? selected = 0 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">How is the SEO services system at Dashpro?</h3>
        <div class="transform transition duration-500 -rotate-180" :class="{ '-rotate-180': selected == 0 }">
          <i class="bi bi-chevron-down"></i>
        </div>
      </button>
    </div>
    <div id="CollapseOnee" x-collapse x-show="selected == 0">
      <div class="relative p-6">
        <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 ioajsklehsnm shadow mb-4 bg-white dark:bg-gray-900">
    <div class="border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-20 dark:border-gray-800 py-2 uajskeiolksb" id="HeadingTwoe">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0" @click="selected !== 1 ? selected = 1 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">How many keywords are optimized?</h3>
        <div class="transform transition duration-500 -rotate-180" :class="{ '-rotate-180': selected == 1 }">
          <i class="bi bi-chevron-down"></i>
        </div>
      </button>
    </div>
    <div id="CollapseTwoe" style="display: none" x-collapse x-show="selected == 1">
      <div class="relative p-6">
        <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 ioajsklehsnm shadow mb-4 bg-white dark:bg-gray-900">
    <div class="border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-20 dark:border-gray-800 py-2 uajskeiolksb" id="HeadingThreee">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0" @click="selected !== 2 ? selected = 2 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">Do you offer any discounted plans?</h3>
        <div class="transform transition duration-500 -rotate-180" :class="{ '-rotate-180': selected == 2 }">
          <i class="bi bi-chevron-down"></i>
        </div>
      </button>
    </div>
    <div id="CollapseThreee" style="display: none" x-collapse x-show="selected == 2">
      <div class="relative p-6">
        <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>

Less Border Accordion

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.


<div id="AccordionPlus" x-data="{ selected: 0 }" class="divide-y divide-gray-200 dark:divide-gray-700">
  <!-- list -->
  <div class="relative flex flex-wrap ioajsklehsnm py-2">
    <div class="relative">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0" @click="selected !== 0 ? selected = 0 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">How is the SEO services system at Dashpro?</h3>
        <div class="transform transition duration-500 hover:text-red-500" :class="{ 'rotate-45': selected == 0 }">
          <i class="bi bi-plus-lg text-xl"></i>
        </div>
      </button>
    </div>
    <div x-collapse x-show="selected == 0">
      <div class="flex-1 pb-4">
        <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 ioajsklehsnm py-2">
    <div class="relative">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0" @click="selected !== 1 ? selected = 1 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">How many keywords are optimized?</h3>
        <div class="transform transition duration-500 hover:text-red-500" :class="{ 'rotate-45': selected == 1 }">
          <i class="bi bi-plus-lg text-xl"></i>
        </div>
      </button>
    </div>
    <div x-collapse x-show="selected == 1" style="display:none;">
      <div class="flex-1 pb-4">
        <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 ioajsklehsnm py-2">
    <div class="relative">
      <button class="py-3 px-0 w-full rounded leading-5 font-medium flex vlaoethsnkma focus:outline-none focus:ring-0" @click="selected !== 2 ? selected = 2 : selected = null">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100">Do you offer any discounted plans?</h3>
        <div class="transform transition duration-500 hover:text-red-500" :class="{ 'rotate-45': selected == 2 }">
          <i class="bi bi-plus-lg text-xl"></i>
        </div>
      </button>
    </div>
    <div x-collapse x-show="selected == 2" style="display:none;">
      <div class="flex-1 pb-4">
        <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>