• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
HTML 5

Details Tag in HTML5

  • WhatsApp
  • Valon Ademi
  • 13y
  • 8.4k
  • 0
  • 0
    • 100
  • Article
DetailTag.zip


The <details> tag is a new tag in HTML 5. The <details> tag specifies additional information or controls about documents that the user can view or hide on demand. The contents of the details tag is hidden by default. The header is visible and could show when the user clicks on the header portion of <details> tag. The contents of the details tag are made visible by adding an open attribute to the <details> tag. The tag can also be used along with the summary tag to make your own header so that the user can expand or collapse the details of the document when required. This tag is only supported by Chrome.

Syntax

<details open="open">
    <summary></summary>
         <p> </p>
</details>

Element-Specific Attribute
Attributes Values Description
open open This Boolean attribute specifies whether the details of the data should be shown to the user or not.

HTML5 Event Attributes

onabort onblur oncanplay
oncanplaythrough onchange onclick
oncontextmenu ondblclick ondrag
ondragend ondragenter ondragleave
ondragover ondragstart ondrop
ondurationchange onemptied onended
onerror onfocus onformchange
onforminput oninput oninvalid
onkeydown onkeypress onkeyup
onload onloadeddata onloadedmetadata
onloadstart onmousedown onmousemove
onmouseout onmouseover onmouseup
onmousewheel onpause onplay
onplaying onprogress onratechange
onreadystatechange onscroll onseeked
onseeking onselect onshow
onstalled onsubmit onsuspend
ontimeupdate onvolumechange onwaiting

Code

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <details>
        <summary>Csharpcorner</summary>
        <p>
            This is good website to improve your knowledge</p>
    </details>
    <br /><br />
    <details>
        <summary>Our Network</summary>
        <a href="http://www.dotnetheaven.com/">.NET Heaven</a>
        <br />
        <a href="http://www.c-sharpcorner.com/">C# Corner</a>
        <br />
        <a href="http://www.dbtalks.com/">DbTalks</a>
        <br />
        <a href="http://www.interviewcorner.com/">Interview Corner</a>
        <br />
        <a href="http://www.longhorncorner.com/">Longhorn Corner</a>
        <br />
        <a href="http://www.mindcracker.com/">Mindcracker</a>
        <br />
        <a href="http://www.vbdotnetheaven.com/">VB.NET Heaven</a>
        <br />
    </details>
    <br /><br /><br />
    <details open="open">
        <summary >Csharpcorner</summary>
        <p>
            This is good website to improve your knowledge</p>
    </details>
    <br /><br /><br />
    <details >
        <summary >Calendar</summary>
       <img src="Image/img.gif" alt="detail tag" />
    </details>
    <br />
</body>
</html>

Output

Chrome

<details> tag

Figure 1

As you have seen the third detail tag shows it's content by default because in the code, I have set the open value for its open attribute.

When you click on Csharpcorner or the Our Network header, the content of the detail tag will display like the following figure 2.

<details> tag

Figure 2

Click on Calendar then the image is displayed as content in the detail tag (see the following figure 3).

<details> tag

Figure 3

  

  • CSS
  • detail tag in HTML5
  • details tag in HTML5
  • HTML5
  • JavaScript
  • learn HTML5
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    A Guide to Mastering HTML5 CSS3 and JavaScript
    Read by 3 people
    Download Now!
    Learn
    View all
    Learn Image
    Learn HTML 5, HTML 5
    Leaderboard
    View all
    Reshab Kumar Singh

    Reshab Kumar Singh
    +0
    Baibhav Kumar

    Baibhav Kumar
    +0
    Harshit Pandey

    Harshit Pandey
    +0
    View all
    Yesterday's leader
    Reshab Kumar Singh  
    Reshab Kumar Singh
    HTML, CSS, JavaScript, ReactJS, NodeJs, MondoDB, DataBase
    New Delhi (India)
    18
    1.1k
    11.2k
    50
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.3k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    20.9k
    20.3k
    10
    Upcoming events
    View all
    • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Jemmy Jackson James Jemmy Jackson James
    Follow
    Rathrola Prem Kumar Rathrola Prem Kumar
    Follow
    Nitin Pandit Nitin Pandit
    Follow
    Rinki Rinki
    Follow
    Daisy Princess Daisy Princess
    Follow

    CSharpBot

    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    Sign-Up Now

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    Sign-Up Now

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.