Accordion

The accordion is used to collapse and expand content to organize it more efficiently. It allows for hiding and displaying content as needed. It reduces clutter and helps maintain the user’s focus by showing only the relevant content at a time.

Compnent Demo

section brief comes here with good space for content

<div class="accordion" id="accordionParent">

<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section Title
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionParent">
<div class="accordion-body">
section brief comes here with good space for content
</div>
</div>
</div>

</div>

Variables

Accordion is available in many fundamental formats:

Default: The default state of the accordion when it is not interacted with. It appears in its initial state without any interaction.
Hovered: It occurs when the user hovers the cursor over the accordion without clicking on it.
Pressed: This state demonstrates how the accordion appears when it is clicked or pressed, indicating interaction.
Focused: This state refers to the accordion when it is selected or active, typically through keyboard navigation, usually via the 'Tab' key.
Disabled: This state shows the accordion when it is not interactive, indicating that the element cannot be interacted with under the current conditions.