The new <details> tag in HTML5 allows users to create an expandable and collapsible element that allows a piece of text or title to contain some hidden information.
Definition and Usage of <details> Tag
The <details> tag specifies additional details of requirements that are visible or hidden to the user.
The <details> tag is used for the user to open and close interactive controls. Any form of content can be placed inside the <details> tag.
The content of the <details> element is invisible to the user unless the open attribute is set.
Usage of <details> Tag
In general, details are used to further explain the content displayed on the page. The effect displayed is similar to that of the jquery accordion plugin. It is also often used in markdown. The content wrapped with this tag will be hidden by default, leaving only a brief text. Details will be displayed after we click. It is roughly written as follows.
<details> <p>I am a hidden content</p> </details>
This has not added any line of js code. After we click, there will be one more open attribute on the details tab. The hidden content is displayed. By default, the brief text is "Details". To modify this text, use it with the summary tag, as shown in the following example.
<details> <summary>Click to see more</summary> <p>I am a hidden content</p> </details>
When I use this tag, a brown border appears (my page background is black and the font is white). How can I not show this border? The answer is simple. You can add the property border:none; in CSS. If this is set, the border will not appear.
Open Attribute of <details> Tag
The details are hidden by default at first and will be displayed when clicked. You can also make it expand by default by setting the open attribute on the <details> tag.
Browser Compatibility for <details> tags
Since it is a new HTML5 tag, browser support is not ideal. From the data from caniuse, currently only Chrome, Safari 8+, and Opera 26+ support this tag. Of course, more browsers will support the <details> tag in the future.