Advertisement:
Read Later
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.
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:
Name: Nano Weather Shield V1.1
Section: PCB
By Kutluhan Aktar
(*) https://www.w3schools.com/tags/tag_details.asp