Accordion With background
Accordion With background
=
<div class="mx-auto max-w-lg">
<div class="space-y-2">
<details class="group rounded-lg open:bg-gray-50" open>
<summary class="flex cursor-pointer list-none items-center justify-between rounded-lg px-6 py-4 text-lg font-medium text-secondary-900 hover:bg-gray-50">
Accordion item 01
<div class="text-secondary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block h-5 w-5 group-open:hidden">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden h-5 w-5 group-open:block">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="px-6 pb-4 text-secondary-500">This is the first item's accordion body.</div>
</details>
<details class="group rounded-lg open:bg-gray-50">
<summary class="flex cursor-pointer list-none items-center justify-between rounded-lg px-6 py-4 text-lg font-medium text-secondary-900 hover:bg-gray-50">
Accordion item 02
<div class="text-secondary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block h-5 w-5 group-open:hidden">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden h-5 w-5 group-open:block">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="px-6 pb-4 text-secondary-500">This is the second item's accordion body.</div>
</details>
<details class="group rounded-lg open:bg-gray-50">
<summary class="flex cursor-pointer list-none items-center justify-between rounded-lg px-6 py-4 text-lg font-medium text-secondary-900 hover:bg-gray-50">
Accordion item 03
<div class="text-secondary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block h-5 w-5 transition-all group-open:hidden">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden h-5 w-5 transition-all group-open:block">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</summary>
<div class="px-6 pb-4 text-secondary-500">This is the second item's accordion body.</div>
</details>
</div>
</div>