Go one step further with our solutions for creating an intuitive, personalized experience.
Accordions components will allow you to organize your content. They unfold or fold your information, leaving only the titles visible
Start by creating an element with the h_accordion class. This will host all child items.
<div class="h_accordion">...</div>
Insert your first item like the example below:
- The h_accordion_item class corresponds to your item.
- The h_accordion_header class corresponds to the header.
- The h_accordion_collapse class allows you to fold / unfold the item.
- The h_accordion_body class will contain all the information specific to the item.
<div class="h_accordion">
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Click here</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
</div>
Basically, the items open without forcing the others to close.
<div class="h_accordion">
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 1</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 2</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
</div>
By adding the single class you will force the other items to close.
<div class="h_accordion single">
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 1</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 2</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 3</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
</div>
<div class="h_accordion single">
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 1</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 2</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
<div class="h_accordion_item">
<button type="button" class="h_accordion_header">👉 Header 3</button>
<div class="h_accordion_collapse">
<div class="h_accordion_body">Hello World</div>
</div>
</div>
</div>
| Class | Definition |
|---|---|
| h_accordion | Basic component. |
| h_accordion single | Avoid multiple openings. |
| h_accordion_header | Title of the accordion. |
| h_accordion_collapse | Contains the body of the accordion. |
| h_accordion_body | Body of the accordion. |
| h_accordion_item | Item of the accordion. |
| h_accordion_item h_accordion--active | Display/hide the item of the accordion. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings