Data display and layout

Accordion

A group of collapse items that share one frame, exclusive when they share a name.

Data display and layout2 classesNo JavaScriptLight and dark

Example

Full

accordion.html

<div class="accordion collapse-plus max-w-lg"><details class="collapse" name="faq" open><summary class="collapse-title">How is the theme built?</summary><div class="collapse-content">Every token is derived from a single seed color with relative color syntax.</div></details><details class="collapse" name="faq"><summary class="collapse-title">Is dark mode automatic?</summary><div class="collapse-content">Yes. It follows the system setting, and the dark class forces it.</div></details><details class="collapse" name="faq"><summary class="collapse-title">Can I use it from a CDN?</summary><div class="collapse-content">Yes, one link tag is enough.</div></details></div>

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the accordion. On a <div> in the example. Sets overflow, border, corner radius and background. CSS `.accordion > .collapse { border: 0; border-radius: 0; background: none; } .accordion > .collapse + .collapse { border-top: var(--m-border-width) solid var(--border); }`
	Modifier	Modifier, combined with the accordion class. Not used in the example above. Sets border, corner radius, background and padding. CSS `.accordion-flush .collapse-content { padding-inline: 0; } .accordion-flush .collapse-title:hover { background: none; }`

Base

Base class of the accordion. On a <div> in the example. Sets overflow, border, corner radius and background.

CSS

.accordion > .collapse {
  border: 0;
  border-radius: 0;
  background: none;
}

.accordion > .collapse + .collapse {
  border-top: var(--m-border-width) solid var(--border);
}

Modifier

Modifier, combined with the accordion class. Not used in the example above. Sets border, corner radius, background and padding.

CSS

.accordion-flush .collapse-content {
  padding-inline: 0;
}

.accordion-flush .collapse-title:hover {
  background: none;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Accordion: start from the base class, then add modifiers -->
<div class="accordion collapse-plus max-w-lg"><details class="collapse" name="faq" open><summary class="collapse-title">How is the theme built?</summary><div class="collapse-content">Every token is derived from a single seed color with relative color syntax.</div></details><details class="collapse" name="faq"><summary class="collapse-title">Is dark mode automatic?</summary><div class="collapse-content">Yes. It follows the system setting, and the dark class forces it.</div></details><details class="collapse" name="faq"><summary class="collapse-title">Can I use it from a CDN?</summary><div class="collapse-content">Yes, one link tag is enough.</div></details></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components