Sitemap / Advertise

Information



Tags



Share

How to create flags in HTML using summary and details

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement


Banggood
Banggood


Definition

In this tutorial, I will show you how to create a toggle flag immaculately in pure HTML using details and summary tags without needing to use JavaScript, React, or Angular.

Syntax(*):

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

The content of a <details> element should not be visible unless the open attribute is set.

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

Code

Create a details tag.

Define a summary tag in it.

To avoid summary outlines when clicked, use outline:none; in styling.

Use cursor:pointer; and user-select:none; to show the summary tag is clickable.

Enter the project information - name, section, author, and image.


<--------------HTML---------------> 

<details>
<summary style="color:#002699;outline:none;font-size:20px;font-weight:bold;cursor:pointer;user-select:none;">Project Description</summary>
<p>Name: Nano Weather Shield V1.1</p>
<p>Section: PCB</p>
<p>By Kutluhan Aktar</p>
<img src="Pictures/project.jpg" />
</details>

Result:

Project Description

Name: Nano Weather Shield V1.1

Section: PCB

By Kutluhan Aktar

References

(*) https://www.w3schools.com/tags/tag_details.asp