HTML5 the details of daily practice expand shrink Label Application

Source: Internet
Author: User

The appearance of the details tag brings us a better user experience, without having to write JS for the effect of this contraction.
Note: only Chrome supports this tag at this time.

Details has a newly added sub-label--summary, and when the mouse clicks on the content text in the summary tag, all other elements in the Details tab will expand or contract.

Detalis Tags:



Case 1:

    1. <! DOCTYPE html>
    2. <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
    3. <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
    4. <body>
    5. <details>
    6. <summary>html5| css3| Forum | Front End Development Network (w3cfuns.com)!</summary>
    7. <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
    8. </detalis>
    9. </body>
Copy Code

What if the summary tag does not exist in details, in fact, when the details element does not have a summary tag, the browser will provide a default text when parsing, such as "view Details" such as localized text, The browser also offers an icon such as up and down arrows. For example, the following case 2 is a non-existent summary child tag example.




Case 2:

    1. <! DOCTYPE html>
    2. <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
    3. <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
    4. <body>
    5. <details>
    6. <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
    7. </details>
    8. </body>
Copy Code

Sometimes, we need to detalis content in the default to expand the status of what to do?
In fact, HTML5 has already thought for us, if has the aspect demand, we only need to add an attribute, like Case 3.





Open property:

Modify the code for Case 1 as follows:


Case 3:

    1. <! DOCTYPE html>
    2. <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
    3. <TITLE>HTML5 daily Practice Details Expand Shrink Label Application </title>
    4. <body>
    5. <details open>
    6. <summary>html5| css3| Forum | Front End Development Network (w3cfuns.com)!</summary>
    7. <P>HTML5 Forum, CSS3 Forum, CSS Forum, web front-end Development Forum, tutorial resources completely free CSS Forum, create the best HTML5/CSS3 forum </p>
    8. </details>
    9. </body>
Copy Code

This shows that HTML5 has indeed brought great convenience for us.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.