HTML5: Details Element

Tutorial details
• Overview: HTML5 Details labels
• Difficulty: elementary
• Supported browsers: Chrome 12 or later versions
My favorite HTML5 new tag is the details element, which has just been integrated into Chrome's latest version 12. I will show you how to use it in today's Quick Start.
________________________________________
What can the Details tag do?
It essentially allows us to display and hide content when clicking a tag. You must be quite familiar with this effect, but until now, it is always implemented using Javascript. Imagine an arrow behind the header. When you click it, the additional information below will be displayed. Click the arrow again to disappear. This function is often used on the FAQ page. The Details element allows us to leave Javascript alone. In other words, it will do this because browser support is still poor. ________________________________________
Example
Now let's dive into and learn how to use this new tag. We start by creating a new details element.

Then, we need to put the contents of summary.
Who Goes to College?
<P> Your mom.

</Details> well, let's start with some more practical examples. I want to use the details element to display different Nettuts + articles. We first create a tag for each article.
<Summary> Dig Into Dojo


<H3> Dig into Dojo: DOM Basics
<P> Maybe you saw that tweet: "jQuery is a gateway drug. it leads to full-on JavaScript usage. "Part of that addiction, I contend, is learning other JavaScript frameworks. and that's what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.
</P>
</Div>
</Details> next, we will add a simple style to it. Body {font-family: sans-serif;} details {
Overflow: hidden;
Background: # e3e3e3;
Margin-bottom: 10px;
Display: block;
} Details summary {
Cursor: pointer;
Padding: 10px;
} Details div {
Float: left;
Width: 65%;
} Details div h3 {margin-top: 0;} details img {
Float: left;
Width: 200px;
Padding: 0 30px 10px 10px;
}

 

Note: For convenience, when the content is displayed. However, when the page is loaded, you will only see the summary text.
If you want to display this status by default, you need to add openattribute to the details element :.