The accordion is based on native HTML elements details and summary, which have built-in toggle behavior:
detailscreates a disclosure widget in which information is visible only when the widget is toggled into an
openstate. A summary or label must be provided using thesummaryelement.nameattribute of thedetailselement is being utilized to construct an exclusive accordion, which consists of a set ofdetailselements. When a user triggers an action to open onedetailselement, any other opendetailselements with the samenameattribute are automatically closed.summary- specifies a summary, caption, or legend for a
detailselement's disclosure box. Clicking thesummaryelement toggles the state of the parentdetailselement open and closed.
By adding or removing the open attribute of the details element, you
can programmatically toggle the state of the accordion.
<details open name="accordions">
<summary>Open for Instant Smiles, Handle With Glee!</summary>
<div>Welcome to the world of tomorrow!</div>
</details>
<details name="accordions">
<summary>Open for Instant Smiles, Handle With Glee!</summary>
<div>Hi there!</div>
</details>
<details name="accordions">
<summary>Open for Instant Smiles, Handle With Glee!</summary>
<div>Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!</div>
</details> Open for Instant Smiles, Handle With Glee!
Welcome to the world of tomorrow!
Open for Instant Smiles, Handle With Glee!
Hi there!
Open for Instant Smiles, Handle With Glee!
Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!
role="button" is used on the summary element, the accordion
opener turns into a button.Open for Instant Smiles, Handle With Glee!
Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!
Open for Instant Smiles, Handle With Glee!
Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!
Open for Instant Smiles, Handle With Glee!
Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!
<details >
<summary role="button" class="s-secondary">Open for Instant Smiles, Handle With Glee!</summary>
<div>Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!</div>
</details>
<details >
<summary role="button" class="s-outline">Open for Instant Smiles, Handle With Glee!</summary>
<div>Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!</div>
</details>
<details >
<summary role="button">Open for Instant Smiles, Handle With Glee!</summary>
<div>Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!</div>
</details> details element is the only child of an article, it becomes an
article accordion. If you wrap the content of the details (excluding summary) into an element, padding is applied to it automatically.Open for Instant Smiles, Handle With Glee!
Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!
<article role="presentation">
<details>
<summary role="button">Open for Instant Smiles, Handle With Glee!</summary>
<div>Unleash pure joy with surprise goodies that guarantee laughter. It's happiness in a box—brace
for grins!</div>
</details>
</article>