2 Cool HTML Elements I Just Discovered
Learn How To Use The Details & Summary Tags

I'm a full stack developer based in Australia. I write articles about Node.js, React, JavaScript & Web Development to make your learning journey easier ๐
Search for a command to run...
Learn How To Use The Details & Summary Tags

I'm a full stack developer based in Australia. I write articles about Node.js, React, JavaScript & Web Development to make your learning journey easier ๐
No comments yet. Be the first to comment.
Introduction Website performance is an important aspect of web development. It consists of mainly two things: The speed of your website How usable is your website for visitors? Importance of website performance Website performance is very importa...

There are plenty of native web APIs that have a variety of uses. Here are 5 useful APIs that I use quite often in my web development projects. Clipboard API The clipboard API is a simple method to copy text to a user's clipboard. This can be used in ...

Hey All ๐ In this article, we'll be covering the Fetch API in JavaScript how you can use it to make HTTP requests. What is the Fetch API? The fetch() method provides a simple way to make HTTP requests in JavaScript. It is natively in the browser, me...

Hey All ๐ In this article, we'll be covering 4 mistakes commonly made by people while learning to code that will seriously impact their coding journey. #1 - Copying and Pasting The first mistake I'll talk about is copying and pasting. We've all don...

Introduction There are plenty of units in CSS. From px to vh, there is an abundance of units all with their distinctive use cases. Considering the amount of options, its perfectly reasonably to be confused as to which unit you should use and where. T...

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.
<details> & <summary> tagTo 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.
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.
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 ๐