Accordion

🗂️ Accordion

(With JavaScript)

💠 Example

(Single)

Single

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolorem doloremque hic ipsam ipsum modi voluptatibus? Amet aperiam fuga minus optio velit. Labore mollitia, voluptatibus! Fuga iste natus sit tempora temporibus vero! Adipisci delectus distinctio esse fuga maiores necessitatibus neque possimus voluptate! Architecto deserunt itaque sequi sint. Alias consequuntur culpa ea eligendi fugiat magni porro, quis soluta veniam vero? Aut corporis dolores eum eveniet nostrum perferendis quae quaerat qui quis rem! Aperiam culpa cupiditate libero minima neque nesciunt optio possimus, quae qui tempore. Consequuntur dignissimos doloremque error facilis fugit inventore, labore molestiae necessitatibus nemo, nesciunt officia omnis pariatur ratione recusandae!

Single

💻 HTML Code

(Single)

Single

Some content

Single

Some content

Single

Some content

💠 Example

(Multiple)

Multiple

💻 HTML Code

(Multiple)

Multiple

Some content

Multiple

Some content

Multiple

Some content

🧩 How to use

Add data-js="collapse" to the button and set data-target to the ID of the matching .accordion-body. The script toggles the panel and updates aria-expanded automatically.

📏 Sizes

These classes apply only to the accordion buttons. Each one already includes both the style and the size, so just pick the one you need.

.accordion-btn

.accordion-btn-sm

.accordion-btn-md

.accordion-btn-lg

🎨 Colors

Button colors and accordion borders are handled separately. Apply these classes directly on the element you want to style.

btn-{color}
Apply on the button
(with hover)

bg-{color}
Apply on the button
(no hover)

accordion-{color}
Apply on the .accordion container
(borders only)

📌 Accessibility

For accessibility, set aria-expanded in your HTML only once to match the initial state. After that, the script updates its value automatically.

Add aria-controls to link the button to the panel ID. This helps screen readers understand which content is being toggled.

📌 State

To keep a panel open on page load, add the .show class on the .accordion-body.

📌 Spacing rules

Do not add padding or margin on .accordion-body. They are always forced to 0. Add spacing on elements inside the panel (like p or ul), not on .accordion-body

⚙️ Variables CSS

Class	Description
`--accordion-bg-color`	Background color of the accordion.
`--accordion-border-color`	Color of the borders.
`--accordion-border-radius`	Corner radius.
`--accordion-border-style`	Border style (solid, dashed, etc.).
`--accordion-border-width`	Border thickness.
`--accordion-button-padding`	Default button padding.
`--accordion-button-padding-lg`	Padding for large buttons.
`--accordion-button-padding-md`	Padding for medium buttons.
`--accordion-button-padding-sm`	Padding for small buttons.