Accordion

Collapsible content sections using the native HTML details element.

Basic Accordion

Click to expand

This content is hidden by default and revealed when the summary is clicked.

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and revealed when the summary is clicked.</p>
</details>

Open by Default

Already expanded

This section starts in the open state.

<details open>
  <summary>Already expanded</summary>
  <p>This section starts in the open state.</p>
</details>

Multiple Accordions

Section 1

Content for section one.

Section 2

Content for section two.

Section 3

Content for section three.

<details>
  <summary>Section 1</summary>
  <p>Content for section one.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>Content for section two.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>Content for section three.</p>
</details>

With Rich Content

Frequently Asked Questions

What is launch.css?

A classless CSS framework for semantic HTML.

How do I install it?

Use npm, pnpm, or include via CDN.

Is it free?

Yes, it's open source and free to use.

<details>
  <summary>Frequently Asked Questions</summary>
  <h3>What is launch.css?</h3>
  <p>A classless CSS framework for semantic HTML.</p>

  <h3>How do I install it?</h3>
  <p>Use npm, pnpm, or include via CDN.</p>

  <h3>Is it free?</h3>
  <p>Yes, it's open source and free to use.</p>
</details>

Exclusive Accordion (name attribute)

Use the name attribute to create mutually exclusive accordions:

Question 1

Answer to question 1.

Question 2

Answer to question 2.

Question 3

Answer to question 3.

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer to question 1.</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer to question 2.</p>
</details>

<details name="faq">
  <summary>Question 3</summary>
  <p>Answer to question 3.</p>
</details>