An accordion allows the user to see information segmented in sections.
An accordion is an expanding/collapsing area that is shown or hidden when clicked. This type of accordion has an arrow on the right next to the title that signifies that the accordion can be expanded and collapsed.
<div class="euaa-accordions">
<div class="euaa-accordions-panel">
<input class="euaa-accordions-panel__selector" type="checkbox" id="acc1">
<label class="euaa-accordions-panel__label" for="acc1">Panel 1</label>
<div class="euaa-accordions-panel__content">This is an accordion panel</div>
</div>
<div class="euaa-accordions-panel">
<input class="euaa-accordions-panel__selector" type="checkbox" id="acc2">
<label class="euaa-accordions-panel__label" for="acc2">Panel 2</label>
<div class="euaa-accordions-panel__content">This is an accordion panel</div>
</div>
</div>
This type of accordion uses the same code, but instead of type="checkbox", use type="radio".
Also in the input tag, one needs to add the name="" property.
In this way since we are using radiobuttons to control the panels, only one panel can be open at a time.
<div class="euaa-accordions">
<div class="euaa-accordions-panel">
<input class="euaa-accordions-panel__selector" type="radio" id="rac1" name="acc">
<label class="euaa-accordions-panel__label" for="rac1">Panel 1</label>
<div class="euaa-accordions-panel__content">This is an accordion panel</div>
</div>
<div class="euaa-accordions-panel">
<input class="euaa-accordions-panel__selector" type="radio" id="rac2" name="acc">
<label class="euaa-accordions-panel__label" for="rac2">Panel 2</label>
<div class="euaa-accordions-panel__content">This is an accordion panel</div>
</div>
</div>