Accordions
Accordion styles for grouped <details> disclosure elements.
- Source file
- src/css/accordions.css
- View on GitHub
- https://github.com/pmbrown/ming-css/blob/main/src/css/accordions.css
Included with:
- ming.css
- ming.min.css
- ming.mono.css
- ming.mono.min.css
Default (anchor)
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Example HTML
<div class="accordion">
<details name="accordion-demo" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-bg">
<details name="accordion-bg-demo" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-bg-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-bg-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>Light & dark (anchor)
Fixed color-scheme utilities included with the backgrounds.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Example HTML
<div class="accordion light">
<details name="accordion-demo" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion dark">
<details name="accordion-demo" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-demo">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>Primary colors (anchor)
The accordions color classes use the primary colors variables, the source file is included separately.
- Source file
- src/css/colors/color-accordions.css
- View on GitHub
- https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-accordions.css
Included with:
- ming.css
- ming.min.css
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Summary
The quick brown fox jumps over the lazy dog.
Example HTML
<div class="accordion-primary">
<details name="accordion-primary" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-primary">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-primary">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-success">
<details name="accordion-success" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-success">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-success">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-danger">
<details name="accordion-danger" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-danger">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-danger">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-info">
<details name="accordion-info" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-info">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-info">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-warning">
<details name="accordion-warning" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-warning">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-warning">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>
<div class="accordion-secondary">
<details name="accordion-secondary" open>
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-secondary">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
<details name="accordion-secondary">
<summary>Summary</summary>
<p>The quick brown fox jumps over the lazy dog.</p>
</details>
</div>