Pop down details in HTML5

How to show pop down details for a particular item?

To pop down the details for a particular item we can use <details> tag.

<body>
     <p>Click [Details] below to toggle details </p>

    <details title="Open" open="open">
        <summary>Details</summary>
        <p>
            The details for this content will be shown when you select it with the
mouse.
        </p>
    </details>
</body>

In the above code snippet, details element has an open property, setting its value to “open” keep the details data popped down. The same can be clicked to toggle the details.

Notice the <summary> tag that is used to control of the popup or popdown details.

Output