Accordion - Tocas UI

Example

Theme

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.

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>

Variations

Plus Sign

An accordion uses plus and minus icons to indicate its open and close states.

Does this service offer refunds?

Sorry, no refunds are provided once the service is purchased.

<details class="ts-accordion is-plus-sign">
    <summary>Does this service offer refunds?</summary>
    Sorry, no refunds are provided once the service is purchased.
</details>