Collapse

The Collapse component toggles the visibility of content segments with smooth slide animations. It is built using the native HTML5 <details> and <summary> elements, customized for visual style and animated transitions.

Single Collapse Container

Click to Expand Panel

This content box expands and collapses smoothly using a native HTML5 <details> tag combined with Javascript height animations. It preserves performance and maintains accessibility natively.

Stacked Accordion Group

Step 1: Code Architecture

Configure your layouts using semantic HTML5 elements. Adding data-role="collapse" initializes the smooth animation hooks.

Step 2: Theme Customization

Override color schemes seamlessly. When open, collapse items dynamically highlight their borders utilizing the active primary theme color.

Step 3: Build & Publish

Compile CSS and launch your modular web application. Custom chevron icons rotate smoothly to indicate open/closed status.

<!-- Single Collapse Item -->
<details class="collapse" data-role="collapse">
    <summary>Header Title</summary>
    <div class="collapse-content">
        <p>Smooth collapsing content goes here...</p>
    </div>
</details>

Markup & Structures

The parent container uses the native HTML5 <details> element carrying class collapse and the initialization attribute data-role="collapse".
The header/trigger is specified inside a <summary> tag. The browser-default arrow icon is hidden, replaced with a smooth rotating CSS chevron.
The expandable body must wrap its content inside a container carrying class collapse-content to allow height calculations and smooth transitions.