Collapse
Display large amounts of text in collapsible sections, also referred to as an accordion
Overview
The collapse (button) component allows users to toggle the visibility of content within a contained area. It is designed to house snippets of secondary or tertiary information that can be easily accessed by users without adding unnecessary clutter to the page. Collapse components are closed by default.
Default
Collapsed content
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Collapsed content
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<details className="box">
<summary className="p-6 bg-gray-100 rounded-2xl font-semibold text-lg dark:bg-gray-800">
Collapsed content
</summary>
<div className="p-6">
A paragraph (from the Greek paragraphos, "to write beside" or "written
beside") is a self-contained unit of a discourse in writing dealing with a
particular point or idea. A paragraph consists of one or more sentences.
Though not required by the syntax of any language, paragraphs are usually
an expected part of formal writing, used to organize longer prose.
</div>
</details>
<details className="box">
<summary className="p-6 rounded-2xl font-semibold text-lg dark:bg-gray-800 dark:bg-transparent">
Collapsed content
</summary>
<div className="p-6 border-t dark:border-gray-700">
A paragraph (from the Greek paragraphos, "to write beside" or "written
beside") is a self-contained unit of a discourse in writing dealing with a
particular point or idea. A paragraph consists of one or more sentences.
Though not required by the syntax of any language, paragraphs are usually
an expected part of formal writing, used to organize longer prose.
</div>
</details>
Open
Collapsed content
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<details open className="box">
<summary className="p-6 bg-gray-100 rounded-2xl font-semibold text-lg dark:bg-gray-800">
Collapsed content
</summary>
<div className="p-6">
A paragraph (from the Greek paragraphos, "to write beside" or "written
beside") is a self-contained unit of a discourse in writing dealing with a
particular point or idea. A paragraph consists of one or more sentences.
Though not required by the syntax of any language, paragraphs are usually
an expected part of formal writing, used to organize longer prose.
</div>
</details>