Accordions
Default Accordion
Use the accordion
class to expand/collapse the accordion content.
Next.js Preview
Accordion Flush
Use accordion-flush
class to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Next.js Preview
Accordions with Icons
Use custom-accordionwithicon
class to show custom icon at accordion.
Next.js Preview
Accordions without Icons
Use accordion-icon-none
class to remove icon at accordion.
Next.js Preview
Accordions with Plus Icon
Use custom-accordionwithicon-plus
class to show plus icon at the accordion.
Next.js Preview
Left Icon Accordions
Use lefticon-accordion
class to show the icon on the left side of the accordion.
Next.js Preview
Accordions Bordered
Use custom-accordion-border
class to create the border at the accordion.
Next.js Preview
Nesting Accordions
Use nesting-accordion
class to create a nesting accordion.
Next.js Preview
Accordions Fill Colored
Use accordion-fill-
class with modifier class to the color accordion.
Next.js Preview
Collapse Example
You can use a link with the href
attribute, or a button with the data-bs-target
attribute. In both cases, the data-bs-toggle="collapse"
is required.
Next.js Preview
Horizontal Collapse
Use the collapse-horizontal
class to transition the width
instead of height
and set a width
on the immediate child element for horizontal collapse.
Next.js Preview
Collapse with Icon
Here is the example of collapse in which the icon is wrapped within the button collapse toggle.
Next.js Preview
Inline & Block Element Collapse
Inline element collapse takes all horizontal space hence you can activate the collapse within by clicking on full-width horizontal space. Block element collapse can be activated by clicking on collapse toggle only.
<h6>
Inline Element Collapse
<span>
Block Element CollapseNext.js Preview
Multiple Targets Collapse
A <button>
or <a>
can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. Multiple <button>
or <a>
can show and hide an element if they each reference it with their href or data-bs-target attribute.