SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🗂️ Accordion native

(Without JavaScript)

💠 Example

(Multiple)
Multiple

Some content

Multiple

Some content

Multiple

Some content

💻 HTML Code

(Multiple)
Multiple

Some content

Multiple

Some content

Multiple

Some content

📏 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-native container
(borders only)

📌 State

To keep a panel open on page load, add the open attribute on the details element.

⚙️ 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.