In this article, we define additional details that the user can view or hide By using the details Element in The Document, It is used for the content/information which is initially hidden but could be displayed if the user wishes to see it.
This tag is used to create an interactive widget that the user can open or close it. The content of the details tag is visible when open the set attributes.
<details> <summary> Text content </summary> <div> Content . . . </div> </details>
Before clicking on details Element:
After Clicking On Button:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Define ng-if, ng-show and ng-hide
- How to Hide an HTML Element in Mobile View using jQuery ?
- How to hide a div when the user clicks outside of it using jQuery?
- How to define a form for user input using HTML5 ?
- Introduction to Model View View Model (MVVM)
- HTML5 | <details> tag
- HTML | DOM Details open Property
- HTML | <details> open Attribute
- How to fetch the details using ng-repeat in AngularJS?
- How to get file content and other details in AngularJS?
- HTML | DOM Details Object
- How to hide an element when printing a web page using CSS?
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- Hide or show elements in HTML using display property
- Hide scroll bar, but while still being able to scroll using CSS
- Image Replacement in Bootstrap using text-hide Class
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.