Accordion
The Accordion component provides lightweight expandable content sections using native HTML elements.
Ignix Lite accordions are accessible by default and work without JavaScript.
Default Accordion
- Preview
- Code
What is ignix-lite?
ignix-lite is a lightweight semantic UI library.
<details>
<summary>
What is ignix-lite?
</summary>
<p>
ignix-lite is a lightweight semantic UI library.
</p>
</details>
Open by Default
- Preview
- Code
How does this work?
Uses native browser behavior without JavaScript.
<details open>
<summary>
How does this work?
</summary>
<p>
Uses native browser behavior without JavaScript.
</p>
</details>
Multiple Accordions
- Preview
- Code
What is ignix-lite?
A lightweight semantic UI library.
Is it accessible?
Yes, it uses native HTML semantics.
Does it require JavaScript?
No, it works without JavaScript.
<details>
<summary>
What is ignix-lite?
</summary>
<p>
A lightweight semantic UI library.
</p>
</details>
<details>
<summary>
Is it accessible?
</summary>
<p>
Yes, it uses native HTML semantics.
</p>
</details>
<details>
<summary>
Does it require JavaScript?
</summary>
<p>
No, it works without JavaScript.
</p>
</details>
Usage
- Preview
- Code
Is the library lightweight?
Yes, ignix-lite focuses on minimal styles and native elements.
Does it support accessibility?
Accessibility is built in using semantic HTML.
<details>
<summary>
Is the library lightweight?
</summary>
<p>
Yes, ignix-lite focuses on minimal styles and native elements.
</p>
</details>
<details>
<summary>
Does it support accessibility?
</summary>
<p>
Accessibility is built in using semantic HTML.
</p>
</details>
Attributes
| Attribute | Type | Description |
|---|---|---|
open | boolean | Keeps accordion expanded by default |