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

📂 Collapse

(With JavaScript)

💠 Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda minima repellat reprehenderit unde? Blanditiis consequatur debitis doloremque, ea eligendi enim est hic, id inventore minima non officiis quo unde. Deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda minima repellat reprehenderit unde? Blanditiis consequatur debitis doloremque, ea eligendi enim est hic, id inventore minima non officiis quo unde. Deserunt.

💻 HTML Code

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda minima repellat reprehenderit unde? Blanditiis consequatur debitis doloremque, ea eligendi enim est hic, id inventore minima non officiis quo unde. Deserunt.

🧩 How to use

Add data-js="collapse" to the button and use data-target to link it to the matching .collapse-body. The script toggles the panel and updates aria-expanded automatically.

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

📌 Accessibility

Set aria-expanded only once in your HTML to match the initial state. After this, the script updates it automatically.

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

📌 State

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

📌 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.