Accordion

An accordion allows users to toggle the display of sections of content.
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
What are the business hours? Every day from 9 AM to 8 PM.
<details class="ts-accordion" open>
    <summary>What are the business hours?</summary>
    Every day from 9 AM to 8 PM.
</details>
Introduction

Accordion uses the <details> HTML tag, supporting the native toggle event to track open/close state.

States
Open

An accordion displays the content when [open] attribute is present.

Does the API provide SSL encryption? No, the bank uses the unencrypted traditional HTTP standard.
<details class="ts-accordion" open>
    <summary>Does the API provide SSL encryption?</summary>
    No, the bank uses the unencrypted traditional HTTP standard.
</details>
Group

Accordions with the same [name] attribute will be grouped, with only one expanded at a time. This feature isn't supported in Firefox.

On which operating systems can this game be played? Linux, Windows, macOS, and Steam OS.
What's the required disk space for the game? At least 20 GB of available space.
<details class="ts-accordion" name="help">
    <summary>On which operating systems can this game be played?</summary>
    Linux, Windows, macOS, and Steam OS.
</details>
<div class="ts-divider is-section"></div>
<details class="ts-accordion" name="help">
    <summary>What's the required disk space for the game?</summary>
    At least 20 GB of available space.
</details>
States
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI