HTML5 | Build a Widget with <details> and <summary> tag!

#html #css #beginners #webdev

The beauty of being a programmer is that we always have new things to learn and test.
Surfing the internet, I came across two HTML tags that I didn't know.
I immediately wanted to test them, and now I would like to write an article.

I am talking about:

<details>
<summary>

These two tags were recently introduced with HTML 5.1, and they are helpful if we want to create a widget that you can open and close whenever you want.

The summary tag is used along with the details tag.

Open your code editor and type

<body>
   <details>
   </details>
</body>

A cute triangle and the word Details will appear on our web page.
If we click on the triangle or the text, you will see that the small triangle will change position indicating the bottom, ready to show us some content that we have not yet entered.

Let's say that we don't like the word details, and we want a different text for our project.

How do we change it?
Easy, using the tag summary.

Between the details tag put the summary tag and the text you want to output.
In my case, I will write Show More.

<body>
   <details>
      <summary>Show More</summary>
   </details>
</body>

Now it's time to show something inside the widget.

Below the summary tag, we put the content we want to show when the user clicks on the arrow.

You can put any HTML tag you want, h1, h2, a list of elements, and so on.

<body>
   <details>
      <summary>Show More</summary>
      <p>Hi Developer!</p>
   </details>
</body>

The details tag can have a default value ( closed ) and an open value.
The open value will show the content without clicking on the arrow

<body>
   <details open>
      <summary>Show More</summary>
      <p>Hi Developer!</p>
   </details>
</body>

Now that we know more about these two tags,let's build a simple FAQ widget.

Html:

<body>
   <h1>FAQ</h1>
   <details>
      <summary>What is HTML?</summary>
      <p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.!</p>
   </details>
   <details>
      <summary>What is CSS?</summary>
      <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
   </details>
   <details>
      <summary>What is Javascript?</summary>
      <p>JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</p>
   </details>
</body>

Css:

body{
   width:80%;
   margin:2rem auto;
   font-family:'Courier New', Courier, monospace;
}
h1{
   text-align: center;
   font-size: 3rem;
}
summary{
   padding:1.2rem;
   background-color: rgb(250, 179, 49);
   margin-top:1.5rem;
   font-weight: 600;
}

p{ padding:1rem }

Output: