HTML5 & lt; details & gt; tag

HTML5 <details> labels
The <details> tag added in HTML5 allows you to create an expandable and foldable component, so that a text or title contains some hidden information. In general, details is used to explain the content displayed on the page. The effect is similar to that of the jQuery accordion plug-in. <Details> <summary> Google Nexus 6 </summary> <p> product details: </p> <dl> <dt> screen </dt> <dd> 5.96 "2560x1440 qhd amoled display (493 ppi) </dd> <dt> battery </dt> <dd> 3220 mAh </dd> <dt> camera </dt> <dd> 13MP rear-facing with optical image stabilization 2MP front-facing </dd> <dt> processor </dt> <dd> Qualcomm®Snapdragon™805 processor </dd> </dl> </details> first, the <details> label, followed by the title <summary>. The content here is generally brief and summative, will be displayed on the page. Then, you can use any type of HTML elements as the details. These content must be displayed after you click <summary>. The result of the code above is as follows: the initial details of the html5 details tag are hidden and displayed when clicked. Of course, you can also set the open attribute for the <details> label to show the attribute by default. <Details open> <summary> Google Nexus 6 </summary> <p> product details: </p> <dl> <dt> screen </dt> <dd> 5.96 "2560x1440 qhd amoled display (493 ppi) </dd> <dt> battery </dt> <dd> 3220 mAh </dd> <dt> camera </dt> <dd> 13MP rear-facing with optical image stabilization 2MP front-facing </dd> <dt> processor </dt> <dd> Qualcomm®Snapdragon™805 processor </dd> </dl> </details> by default, details are displayed and collapsed after you click the title.