Sunday, 24 June 2012

How to add Details tag in HTML5

The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at the image below:

The details tag in a browser

When a user clicks the above message, the following information is revealed:

The details tag expanded when clicked on

Clicking the summary will hide the above message.
The Details tag is used like this:

<DETAILS>

<SUMMARY>Click here for further information</ SUMMARY >

<P>
Further information is revealed when a user clicks the summary
<BR>
Click the summary again to hide this message.

</ DETAILS >
In between two Details tags, you add a pair of Summary tags. The summary is the part that is shown to the user. Details can then be added below the Summary tags.

Sadly, only the Chrome browser supports the Details tag at the time of writing. Browsers that don't support the Details tag will simply display the whole of the information you added between the two tags, including the summary.

No comments:

Post a Comment