Accordion

Build vertically collapsing accordions with Alpinejs or Vanilla javascript.

Accordion strong

Answer to Question 1
Answer to Question 2
Answer to Question 3 
            
<!-- Accordion alpinejs -->
<div x-data="{accordion:0}" class="accordion w-full">
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button @click="accordion !== 0 ? accordion = 0 : accordion = null" :class="{ 'rounded-b-none': accordion == 0 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 1</h4>
      <span :class="{ '-rotate-180': accordion == 0 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 0" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 1
    </div>
  </div>

  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button @click="accordion !== 1 ? accordion = 1 : accordion = null" :class="{ 'rounded-b-none': accordion == 1 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 2</h4>
      <span :class="{ '-rotate-180': accordion == 1 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 1" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 2
    </div>
  </div>

  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button @click="accordion !== 2 ? accordion = 2 : accordion = null" :class="{ 'rounded-b-none': accordion == 2 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 3</h4>
      <span :class="{ '-rotate-180': accordion == 2 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 2" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 3
    </div>
  </div>
</div>
              
            
              
<!-- Accordion -->
<div data-type="accordion-container" class="accordion w-full">
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion1" class="active [&.active_.icon-collapse]:-rotate-180 [&.active]:!rounded-b-none py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 1</h4>
      <span class="icon-collapse ms-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion1" data-type="collapsed" class="active [&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 1
    </div>
  </div>

  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion2" class="[&.active_.icon-collapse]:-rotate-180 [&.active]:!rounded-b-none py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 2</h4>
      <span class="icon-collapse ms-autotransition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion2" data-type="collapsed" class="[&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 2
    </div>
  </div>

  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 border-2 border-black rounded-lg shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion3" class="[&.active_.icon-collapse]:-rotate-180 [&.active]:!rounded-b-none py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border-b-2 border-black">
      <h4 class="text-base font-bold">Question 3</h4>
      <span class="icon-collapse ms-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion3" data-type="collapsed" class="[&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 rounded-b-lg">
      Answer to Question 3
    </div>
  </div>
</div>

Accordion simple

Answer to Question 1
Answer to Question 2
Answer to Question 3 
              
<!-- Accordion alpinejs -->
<div x-data="{accordion:0}" class="accordion w-full">
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]" :class="{ 'shadow-[4px_4px_0_0_#000000]': accordion == 0 }">
    <!-- trigger -->
    <button @click="accordion !== 0 ? accordion = 0 : accordion = null" :class="{ 'rounded-b-none': accordion == 0 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 1</h4>
      <span :class="{ '-rotate-180': accordion == 0 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 0" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 1
    </div>
  </div>
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]" :class="{ 'shadow-[4px_4px_0_0_#000000]': accordion == 1 }">
    <!-- trigger -->
    <button @click="accordion !== 1 ? accordion = 1 : accordion = null" :class="{ 'rounded-b-none': accordion == 1 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 2</h4>
      <span :class="{ '-rotate-180': accordion == 1 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 1" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 2
    </div>
  </div>
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]" :class="{ 'shadow-[4px_4px_0_0_#000000]': accordion == 2 }">
    <!-- trigger -->
    <button @click="accordion !== 2 ? accordion = 2 : accordion = null" :class="{ 'rounded-b-none': accordion == 2 }" class="icon-collapse py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 3</h4>
      <span :class="{ '-rotate-180': accordion == 2 }" class="ml-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div x-show="accordion == 2" class="hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 3
    </div>
  </div>
</div>
              
            
              
<!-- Accordion  -->
<div data-type="accordion-container" class="accordion w-full">
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion1" class="active [&.active]:rounded-b-none [&.active_.icon-collapse]:-rotate-180 py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 1</h4>
      <span class="icon-collapse ms-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion1" data-type="collapsed" class="active [&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 1
    </div>
  </div>
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion2" class="[&.active]:rounded-b-none [&.active_.icon-collapse]:-rotate-180 py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 2</h4>
      <span class="icon-collapse ms-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion2" data-type="collapsed" class="[&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 2
    </div>
  </div>
  <!-- item -->
  <div class="relative w-full hsdfdsfhsdf hsdfdsfhsdf-wrap oskasdadiaa mb-4 bg-white dark:bg-neutral-600 rounded-lg hover:shadow-[4px_4px_0_0_#000000]">
    <!-- trigger -->
    <button data-type="collapse" data-target="#accordion3" class="[&.active]:rounded-b-none [&.active_.icon-collapse]:-rotate-180 py-3 px-4 rounded hsdfdsfhsdf qesolakmsjd focus:outline-none focus:ring-0 text-start bg-neutral-100 dark:bg-neutral-500 border border-black">
      <h4 class="text-base font-bold">Question 3</h4>
      <span class="icon-collapse ms-auto transition duration-500">▼</span>
    </button>
    <!-- content -->
    <div id="accordion3" data-type="collapsed" class="[&.active]:block hidden hsdfdsfhsdf-1 p-6 bg-white dark:bg-neutral-600 border-x border-b border-black rounded-b">
      Answer to Question 3
    </div>
  </div>
</div>

More Info

Alpine js accordion uses x-data=, @click=, :class= and x-show=

Vanilla javascript accordion uses data-type="accordion-container", data-type="collapse", data-target="#", target id and data-type="collapsed"