Accordion
Standard accordion
How do you create an accordion?
Easy! As long as you don't have to support IE11 or older browsers you could use <details> and <summary> natively.
What if I have to support IE11 or older browsers?
No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.
What type of content can I have inside one of these?
Almost anything you'd like. The <details> element allows all flow content, which is basically everything.
How does it work?
The <details> element encapsulates the <summary> element. The <summary> becomes the 'label' for the <details> and acts like a button. When clicked, the attribute open is added to the <details> element, making it display. You can therefore style the open and closed states seperately if you'd like.
Exemples
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">
<h3 class="accordion-title">How do you create an accordion?</h3>
<i class="icon-chevron-bottom"></i>
</div>
<div class="accordion-body">
<p>Easy! As long as you don't have to support IE11 or older browsers you could use <details> and
<summary> natively.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<h3 class="accordion-title">What if I have to support IE11 or older browsers?</h3>
<i class="icon-chevron-bottom"></i>
</div>
<div class="accordion-body">
<p>No worries. The fallback for these elements is quite good. They will display as open. You won't get the
open/close
mechanism, but you won't lose any content either.</p>
</div>
</div>
</div>
Personalised color accordion
How do you create an accordion?
Easy! As long as you don't have to support IE11 or older browsers you could use <details> and <summary> natively.
What if I have to support IE11 or older browsers?
No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.
Exemples
You can change the style value of --hue css variable (0 to 240)
<div class="accordion" style="--hue: 200">
<div class="accordion-item">
<div class="accordion-header">
<h3 class="accordion-title">How do you create an accordion?</h3>
<i class="icon-chevron-bottom"></i>
</div>
<div class="accordion-body">
<p>Easy! As long as you don't have to support IE11 or older browsers you could use <details> and
<summary> natively.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<h3 class="accordion-title">What if I have to support IE11 or older browsers?</h3>
<i class="icon-chevron-bottom"></i>
</div>
<div class="accordion-body">
<p>No worries. The fallback for these elements is quite good. They will display as open. You won't get the
open/close
mechanism, but you won't lose any content either.</p>
</div>
</div>
</div>