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

📂 Collapse native

(Without JavaScript)

💠 Example

Collapse
  • menu
  • menu
  • menu

💻 HTML Code

Collapse
  • menu
  • menu
  • menu

📏 Sizes

These classes apply only to the collapse button. Each one already includes its own size and spacing.
.collapse-btn
.collapse-btn-sm
.collapse-btn-md
.collapse-btn-lg

🎨 Colors

Collapse button and panel colors are handled separately. Apply these classes directly to the element you want to style.
btn-{color}
Apply on the button
(with hover)
bg-{color}
Apply on the button
(no hover)
collapse-{color}
Apply on the .collapse-native
(borders only)

📌 State

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

📌 Spacing rules

Do not add padding or margin on .collapse-body. Add spacing on elements inside the panel (like p or ul), not on .collapse-body.

⚙️ Variables CSS

Variable Description
--collapse-bg-color Background color of the collapse container.
--collapse-border-color Border color of the collapse container.
--collapse-border-radius Corner radius of the collapse container.
--collapse-border-style Border style of the collapse container.
--collapse-border-width Thickness of the collapse border.
--collapse-button-padding Default padding inside the collapse button.
--collapse-button-padding-lg Padding for large-sized collapse buttons.
--collapse-button-padding-md Padding for medium-sized collapse buttons.
--collapse-button-padding-sm Padding for small-sized collapse buttons.