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

Felix DUSENGIMANA @felixdusengimana

About: A software engineer from Rwanda with the ambitions of developing the world's technology through programming and coding 👌

Location:
Rwanda, Byumba
Joined:
Jan 17, 2021

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

Publish Date: May 22 '22
71 6

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

Comments 6 total

  • Felix DUSENGIMANA
    Felix DUSENGIMANAMay 23, 2022

    Yes, you can add transition effects to your details.

  • Jolanta Svobodova
    Jolanta SvobodovaMay 2, 2023

    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

  • Aishikhan
    AishikhanSep 7, 2024

    I have posted this code on my website, Methstreams good work, thanks.

  • Technical Care BD
    Technical Care BDOct 16, 2024

    Thank you. Helping for me technicalcarebd.com

  • mohammad_3_14
    mohammad_3_14Oct 26, 2024

    hi any body is here from iran ?

Add comment