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

What is ignix-lite?

ignix-lite is a lightweight semantic UI library.

Code

<details>
  <summary>
    What is ignix-lite?
  </summary>

  <p>
    ignix-lite is a lightweight semantic UI library.
  </p>
</details>

---

Open by Default

Preview

How does this work?

Uses native browser behavior without JavaScript.

Code

<details open>
  <summary>
    How does this work?
  </summary>

  <p>
    Uses native browser behavior without JavaScript.
  </p>
</details>

---

Multiple Accordions

Preview

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.

Code

<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

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.

Code

<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