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 effects of the above Code are as follows: the initial details are hidden and displayed when you click. 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. For the example above, click here to preview the online version. Browser compatibility is a new HTML5 tag, and browser support is not ideal. From the data from caniuse, currently only Chrome, Safari 8 + and Opera 26 + support this tag. Fortunately, If you enable the "display results from UC Browser" option in caniuse, you will find that the domestic UC browser also supports this tag. Since Polyfill does not support this situation, it is necessary to use polyfill. The gasket is manually simulated using JavaScript on browsers that do not support this feature. It seems that the browser supports this feature. Chemerisuk provides an implementation. The source code is on GitHub. The specific implementation idea is also written as a blog post and sent to Smashing Magazine. For usage instructions, see GitHub.