Toggle Button¶
The h-toggle-btn webcomponent provides an interactive button that controls the visibility of associated toggleable content. It seamlessly integrates with the h-toggle component to manage show/hide actions, enabling developers to create dynamic and responsive user interfaces. This component is ideal for scenarios where you need to toggle the visibility of sections, modals, or any other content within your application.
Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
action |
string |
collapse |
Action mode of the button. Can be set to collapse (hide content when opened) or expand (show content when closed) |
DOM Events¶
The h-toggle dispatches the following DOM Events:
Example¶
In this example we render a basic h-toggle-btn element that toggles the h-toggle
HTML
<h-toggle opened>
<h-toggle-btn action="expand">Toggle Content</h-toggle-btn>
<h-toggle-btn action="collapse" hidden>Toggle Content</h-toggle-btn>
<template>
<div class="toggle-content">
<p>This is the toggleable content.</p>
</div>
</template>
</h-toggle>