The details and summary tags are two tags I recently discovered that I think are very cool. You can build accordion style sections without the need of any JavaScript making these tags very interesting and useful.

The <details> & <summary> tag

To get started, open up a HTML file in your preferred text editor.

Paste the following code:

<details>
  <summary>Click me to reveal text</summary>
  <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum repellat minima 
       voluptate, eveniet unde velit aliquid est consequatur voluptatibus.
   </p>
</details>

If you open up the file in your browser, you should be able to see a screen like this:

When you click on the text, it should reveal the paragraph element with the Lorem Ipsum content:

Pretty cool, right?

With just a few lines of code you add toggleable sections to your website with ease.

Explaining The Code

So, how the does the code work?

Firstly, the <details> tag surrounds all other elements including the paragraph tag (<p>) and the <summary tag. The text in the summary tag is the text that is displayed to the user for them to click on which will reveal the rest of the content.

The elements that come after the summary tag are revealed when a user clicks on the whatever is in the summary tag. In this case, its simply 20 words of Lorem Ipsum text. However, it could be an image or any other HTML element we wanted to use.

Sum Up

I know this was a short article, but I thought I would share these 2 tags which I found to be quite interesting.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake-K-Yeboah

You can also show your support by buying me a coffee 😃