Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Collapse

A details element that opens and closes, with an arrow or plus icon.

Data display and layout5 classesNo JavaScriptLight and dark

Example

Full

Classes

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

ClassTypeWhat it does
Base Base class of the collapse. On a <details> in the example. Sets overflow, border, corner radius, background, height and transition.
CSS
@media (prefers-reduced-motion: no-preference) {
  .collapse {
    interpolate-size: allow-keywords;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .collapse[open]::details-content {
    block-size: auto;
  }
}
Part Part of the collapse. On a <summary> in the example. Sets flex display, alignment, gap, padding, font weight and pointer cursor.
CSS
.collapse-title:hover {
  background: var(--surface-2);
}

.collapse-title::-webkit-details-marker {
  display: none;
}
Part Part of the collapse. On a <div> in the example. Sets padding and text color.
CSS
.collapse-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted-foreground);
}

.accordion-flush .collapse-content {
  padding-inline: 0;
}
Modifier Modifier, combined with the collapse class. On a <details> in the example. Sets generated content, alignment, text color, transition, width and height.
CSS
:is(.collapse-arrow[open], .collapse-arrow [open]) > .collapse-title::after {
  rotate: -135deg;
  translate: 0 25%;
}

.collapse-arrow .collapse-title::after {
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.25rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -25%;
}
Modifier Modifier, combined with the collapse class. Not used in the example above. Sets generated content, alignment, text color, transition, width and height.
CSS
:is(.collapse-plus[open], .collapse-plus [open]) > .collapse-title::after {
  rotate: 180deg;
  background-size: 100% 2px, 2px 0;
}

.collapse-plus .collapse-title::after {
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
}

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">

<!-- Collapse: start from the base class, then add modifiers -->
<details class="collapse collapse-arrow max-w-lg"><summary class="collapse-title">Does it need a build step?</summary><div class="collapse-content">No. Link one stylesheet and every component works with plain HTML.</div></details>

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.

Accessibility

  • Built on details and summary, so it opens with Enter or Space and screen readers announce expanded and collapsed. A shared name makes a group exclusive.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Data display and layoutTimelineEvents on a line with dots or icons, vertical, horizontal or alternating sides.Data display and layoutStatsKey numbers with a title, value, description, figure and up or down trend.Data display and layoutAccordionA group of collapse items that share one frame, exclusive when they share a name.Data display and layoutCarouselA scroll snap slider with centered, full width and vertical modes, plus dot and arrow links to slide ids.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.