Basic examples
The accordion uses the collapse functionality to make it fold and unfold.
Accordions are useful when you need to organize lots of information in a vertically limited space. The headers let the user scan through main subjects of the content, and choose which of the subjects they would like to examine in depth by clicking on it. It's very useful for FAQs and complex contact forms.
This is the first item's accordion body. It is shown
by default, until the collapse plugin adds the appropriate classes
that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You
can modify any of this with custom CSS or overriding our default
variables. It's also worth noting that just about any HTML can go
within the
.accordion-body, though the transition does
limit overflow.
This is the second item's accordion body. It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
.accordion-body, though the transition
does limit overflow.
This is the third item's accordion body. It is hidden
by default, until the collapse plugin adds the appropriate classes
that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You
can modify any of this with custom CSS or overriding our default
variables. It's also worth noting that just about any HTML can go
within the
.accordion-body, though the transition does
limit overflow.
<div id="accordionExample">
<div
class="rounded-t-lg border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="headingOne">
<button
class="group relative flex w-full items-center rounded-t-lg border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
Accordion Item #1
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseOne"
class="!visible"
data-twe-collapse-item
data-twe-collapse-show
aria-labelledby="headingOne"
data-twe-parent="#accordionExample">
<div class="px-5 py-4">
<strong>This is the first item's accordion body.</strong> It is
shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div
class="border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="headingTwo">
<button
class="group relative flex w-full items-center border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Accordion Item #2
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6 ">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseTwo"
class="!visible hidden"
data-twe-collapse-item
aria-labelledby="headingTwo"
data-twe-parent="#accordionExample">
<div class="px-5 py-4">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div
class="rounded-b-lg border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="accordion-header mb-0" id="headingThree">
<button
class="data-[twe-collapse-collapsed] group relative flex w-full items-center border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none data-[twe-collapse-collapsed]:rounded-b-lg dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10"
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Accordion Item #3
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseThree"
class="!visible hidden"
data-twe-collapse-item
aria-labelledby="headingThree"
data-twe-parent="#accordionExample">
<div class="px-5 py-4">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
</div>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Flush
Classes below enable you to display the accordion without the default background color, borders and rounded corners. It also makes it stretch full width of their parent container. It comes useful when you want to embed the accordion in a different component i.e. inside of a Card or Modal.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is the first item's
accordion body.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is the second item's
accordion body. Let's imagine this being filled with some actual
content.
Placeholder content for this accordion, which is intended to
demonstrate the
.accordion-flush class. This is the third item's
accordion body. Nothing more exciting happening here in terms of
content, but just filling up the space to make it look, at least at
first glance, a bit more representative of how this would look in a
real-world application.
<div id="accordionFlushExample">
<div
class="rounded-none border border-e-0 border-s-0 border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="flush-headingOne">
<button
class="group relative flex w-full items-center rounded-none border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne">
Accordion Item #1
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="flush-collapseOne"
class="!visible border-0"
data-twe-collapse-item
data-twe-collapse-show
aria-labelledby="flush-headingOne"
data-twe-parent="#accordionFlushExample">
<div class="px-5 py-4">
Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the first item's
accordion body.
</div>
</div>
</div>
<div
class="rounded-none border border-e-0 border-s-0 border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="flush-headingTwo">
<button
class="group relative flex w-full items-center rounded-none border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo">
Accordion Item #2
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="flush-collapseTwo"
class="!visible hidden border-0"
data-twe-collapse-item
aria-labelledby="flush-headingTwo"
data-twe-parent="#accordionFlushExample">
<div class="px-5 py-4">
Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the second item's
accordion body. Let's imagine this being filled with some actual
content.
</div>
</div>
</div>
<div
class="rounded-none border border-b-0 border-e-0 border-s-0 border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="flush-headingThree">
<button
class="group relative flex w-full items-center rounded-none border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#flush-collapseThree"
aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="flush-collapseThree"
class="!visible hidden"
data-twe-collapse-item
aria-labelledby="flush-headingThree"
data-twe-parent="#accordionFlushExample">
<div class="px-5 py-4">
Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the third item's
accordion body. Nothing more exciting happening here in terms of
content, but just filling up the space to make it look, at least
at first glance, a bit more representative of how this would look
in a real-world application.
</div>
</div>
</div>
</div>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Always open
By default, an accordion item will collapse when you click on another
accordion item. If you want to change it, and keep the accordion items open
until they are explicitly clicked on, you can delete the
data-twe-parent from the collapsing div.
This is the first item's accordion body. It is shown
by default, until the collapse plugin adds the appropriate classes
that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You
can modify any of this with custom CSS or overriding our default
variables. It's also worth noting that just about any HTML can go
within the
.accordion-body, though the transition does
limit overflow.
This is the second item's accordion body. It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
.accordion-body, though the transition
does limit overflow.
This is the third item's accordion body. It is hidden
by default, until the collapse plugin adds the appropriate classes
that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You
can modify any of this with custom CSS or overriding our default
variables. It's also worth noting that just about any HTML can go
within the
.accordion-body, though the transition does
limit overflow.
<div id="accordionExample5">
<div
class="rounded-t-lg border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="headingOne5">
<button
class="group relative flex w-full items-center rounded-t-lg border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-target="#collapseOne5"
aria-expanded="true"
aria-controls="collapseOne5">
Accordion Item #1
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseOne5"
class="!visible"
data-twe-collapse-item
data-twe-collapse-show
aria-labelledby="headingOne5">
<div class="px-5 py-4">
<strong>This is the first item's accordion body.</strong> It is
shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div
class="border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="headingTwo5">
<button
class="group relative flex w-full items-center rounded-none border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10 "
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#collapseTwo5"
aria-expanded="false"
aria-controls="collapseTwo5">
Accordion Item #2
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6 ">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseTwo5"
class="!visible hidden"
data-twe-collapse-item
aria-labelledby="headingTwo5">
<div class="px-5 py-4">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div
class="rounded-b-lg border border-t-0 border-neutral-200 bg-white dark:border-neutral-600 dark:bg-body-dark">
<h2 class="mb-0" id="headingThree5">
<button
class="group relative flex w-full items-center border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none data-[twe-collapse-collapsed]:rounded-b-lg data-[twe-collapse-collapsed]:transition-none dark:bg-body-dark dark:text-white [&:not([data-twe-collapse-collapsed])]:bg-white [&:not([data-twe-collapse-collapsed])]:text-primary [&:not([data-twe-collapse-collapsed])]:shadow-border-b dark:[&:not([data-twe-collapse-collapsed])]:bg-surface-dark dark:[&:not([data-twe-collapse-collapsed])]:text-primary dark:[&:not([data-twe-collapse-collapsed])]:shadow-white/10"
type="button"
data-twe-collapse-init
data-twe-collapse-collapsed
data-twe-target="#collapseThree5"
aria-expanded="false"
aria-controls="collapseThree5">
Accordion Item #3
<span
class="-me-1 ms-auto h-5 w-5 shrink-0 rotate-[-180deg] transition-transform duration-200 ease-in-out group-data-[twe-collapse-collapsed]:me-0 group-data-[twe-collapse-collapsed]:rotate-0 motion-reduce:transition-none [&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div
id="collapseThree5"
class="!visible hidden"
data-twe-collapse-item
aria-labelledby="headingThree5">
<div class="px-5 py-4">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control
the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
</div>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Related resources
Tutorials:
Extended Docs:
animations
colors
typography
mega menu
pills
tabs
buttons
collapse
dropdown
link
list group
borders
breakpoints
center grid items
dark theme
display flex
paragraph spacing
position
spacing
text bold
text ellipsis