Accordion
Classes Information
| ClassName | Description |
|---|---|
| accordion-group | Wrapper htmlFor accordion group |
| accordion-group-secondary | Set secondary color to the title section |
| accordion-group-hover | Title section will have a hover effect |
| accordion-toggle | Toggle htmlFor accordion |
| accordion | Wrapper htmlFor the header and content |
| accordion-header | Wrapper htmlFor the title and icon |
| accordion-title | Title section of the accordion |
| accordion-icon | Icon htmlFor the accordion on the right side |
| accordion-content | Content section of the accordion |
| accordion-open | The accordion will be opened by default |
Basic Usage
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Example Code
html
<div class="accordion-group">
<div class="accordion">
<input type="checkbox" id="accordion-1" class="accordion-toggle" />
<div class="accordion-header">
<label for="accordion-1" class="accordion-title"
>Toggle Accordion 1</label
>
</div>
<div class="accordion-content">
<div class="min-h-0">
Netus egestas himenaeos aptent fringilla fermentum lacinia
pretium. Orci et tellus lectus luctus pharetra ullamcorper
curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" id="accordion-2" class="accordion-toggle" />
<div class="accordion-header">
<label for="accordion-2" class="accordion-title"
>Toggle Accordion 2</label
>
</div>
<div class="accordion-content">
<div class="min-h-0">
Nullam sem aliquet interdum id in vivamus gravida vestibulum morbi
iusto laborum autem placeat aspernatur inventore eius deleniti
reprehenderit? Numquam commodi totam mollitia quo
</div>
</div>
</div>
</div>With Icon
for add an icon, add tag accordion-header before accordion-content and add span with class accordion-icon and then put label and span inside tag accordion-header.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Example Code
html
<div class="accordion-group">
<div class="accordion">
<input type="checkbox" id="toggle-15" class="accordion-toggle" />
<div class="accordion-header">
<label for="toggle-15" class="accordion-title">Toggle Accordion 1</label>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path></svg>
</span>
</div>
<div class="accordion-content text-content2">
<div class="min-h-0">Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" id="toggle-16" class="accordion-toggle" />
<div class="accordion-header">
<label for="toggle-16" class="accordion-title">Toggle Accordion 2</label>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path></svg>
</span>
</div>
<div class="accordion-content">
<div class="min-h-0">Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.</div>
</div>
</div>
</div>Hover and Description
For Hover add class accordion-group-hover in div class accordion-group, for description, insert new a span inside tag label.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Example Code
html
<div class="accordion-group accordion-group-hover">
<div class="accordion">
<input type="checkbox" id="toggle-9" class="accordion-toggle" />
<div class="accordion-header">
<label for="toggle-9" class="accordion-title">
<span>Toggle Accordion 1</span>
<span class="text-sm text-content3 font-normal"
>Nullam sem aliquet interdum id in vivamus gravida vestibulum
morbi</span
>
</label>
<span class="accordion-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
></path>
</svg>
</span>
</div>
<div class="accordion-content text-content2">
<div class="min-h-0">
Netus egestas himenaeos aptent fringilla fermentum lacinia
pretium. Orci et tellus lectus luctus pharetra ullamcorper
curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
</div>
</div>
</div>
<div class="accordion">
<input type="checkbox" id="toggle-10" class="accordion-toggle" />
<div class="accordion-header">
<label for="toggle-10" class="accordion-title">
<span>Toggle Accordion 2</span>
<span class="text-sm text-content3 font-normal"
>Nullam sem aliquet interdum id in vivamus gravida vestibulum
morbi</span
>
</label>
<span class="accordion-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
></path>
</svg>
</span>
</div>
<div class="accordion-content">
<div class="min-h-0">
Netus egestas himenaeos aptent fringilla fermentum lacinia
pretium. Orci et tellus lectus luctus pharetra ullamcorper
curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
</div>
</div>
</div>
</div>Focusable
For Focusable you can delete id in input text and for in label then add tabindex in div class accordion.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Netus egestas himenaeos aptent fringilla fermentum lacinia pretium. Orci et tellus lectus luctus pharetra ullamcorper curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
Example Code
html
<div class="accordion-group">
<div class="accordion" tabindex="0">
<div class="accordion-header">
<label class="accordion-title">Toggle Accordion 1</label>
</div>
<div class="accordion-content">
<div class="min-h-0">
Netus egestas himenaeos aptent fringilla fermentum lacinia
pretium. Orci et tellus lectus luctus pharetra ullamcorper
curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
</div>
</div>
</div>
<div class="accordion" tabindex="0">
<div class="accordion-header">
<label class="accordion-title">Toggle Accordion 2</label>
</div>
<div class="accordion-content">
<div class="min-h-0">
Netus egestas himenaeos aptent fringilla fermentum lacinia
pretium. Orci et tellus lectus luctus pharetra ullamcorper
curabitur fringilla. Consectetuer torquent turpis augue arcu enim.
iure quod iure quibusdam corrupti eos quos quod iure quibusdam
</div>
</div>
</div>
</div>