The <details> component speaks to a revelation gadget from which the client can get extra data or controls.
Basically, we can utilize details to make an accordion-like gadget that the client can flip open and shut. Inside <details>, we can put any kind of data we need.
There are two pertinent components here: <details> and, alternatively, <summary>. <details> is the wrapper for all the substance we need to show and cover up, and <summary> holds the — well, the <summary> and title of the segment. Actually we needn't bother with the <summary>. In the event that nonattendant, the program will utilize some default content.
The substance of a <details> component ought not be obvious unless the open characteristic is situated.
Here is the Syntax of DETAILS Element
<details> <summary> Some contents goes here </summary> </detals>
Below is complete syntax along with example
<!DOCTYPE html> <html> <head> <title>Title name will go here</title> </head> <body> <details> <summary> This is the default content. </summary> <p>This is the main content, which will be shown.</p> </details> </body> </html>