Let's Create an FAQ section with HTML and CSS only (Detail tag explained)

Using <detail> and <summary> HTML tags you can create a simple accordion or toggle between hiding and showing secondary text on your website.

These codes are enough to create an accordion.

<details>
  <summary>How do I create accordion?</summary>
  <div>
 The tags <em>details</em> and <em>summary</em> have you covered.
  </div>
</details>

detail tag has an attribute called open which by default is set to false and if you set it to true your detail with be expanded by default.

Let's see how we can style our accordion.

Do you have an question ping me via twitter