DEV Community

Cover image for Let's Create an FAQ section with HTML and CSS only (Detail tag explained)
Felix DUSENGIMANA
Felix DUSENGIMANA

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
felixdusengimana profile image
Felix DUSENGIMANA

Yes, you can add transition effects to your details.

Collapse
 
jolanta_svobodova_7a06263 profile image
Jolanta Svobodova

Hi, thank you for your code! I would like to divide questions into categories - my idea is to have like 5 categories and the questions will display after click - just like summary in your code.

Example:

Category 1
Category 2
Category 3

after click:
Category 1
Question1
Question2
Category 2

after another click:
Category 1
Question1
This is the answer to first question.
Question2
Category 2

Could you please help me how to do that?
Thank you
Jolanta

Some comments may only be visible to logged-in visitors. Sign in to view all comments.