accordionsBeginneranimation
Application Accordion
Collapsible FAQ-style accordion with rotating chevron and detail panel.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build an accordion with Tailwind using <details>/<summary>: a list of expandable items, each with a question (summary) and an answer panel that slides open when clicked. Show a chevron icon that rotates 180° when open. Use rounded borders and subtle hover states. No JS — leverage native <details> behavior.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/accordions/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-accordion
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-3xl p-6 w-full">
<div class="space-y-2">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>What are the basic features?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>How do I get started?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>What support options are available?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</div>
</div>