HTML5 Tutorial: How to use the details element and the SUMMARY element

Article Introduction: details and summary elements.

Once upon a time, when we created a widget that could show/hide some content, we had to use JavaScript. Sometimes you may have to download a complete JS library for this small feature to achieve this function. Cheer for the moment below! HTML5 provides a way to create this drag-and-drop feature, and we just need a few lines of HTML code to get that effect (and, for now, the effect is dependent on the browser in use, which, of course, may not be a problem in the near future). Let's take a look at <detail> Elements.

Here is the description in the specification

The details element represents a disclosure widget from which the user can obtain additional information or controls.

- WHATWG HTML5 specification

Theoretically we can use it to create that kind of folding widget, where the user can have open and closed interactions. In <details> we can put in any content we want to put in.

Browser support

Before we start, actually, let's take a look at the current browser support, and only Chrome supports <details > elements at the moment. Opera will soon support opera'll support it soon, let's use chrome to demonstrate this effect.

How to use <details

Here are two related elements:<details> and optional
Let's look at the following code:

1 2 3 4

<details>   <summary>Show/Hide me</summary>   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>

You can view the effect by using the link below at the Jsbin. This is a simple example but the code that can perfectly show the effect is not any javascript.

OPen Property

In the example above, the content is hidden when the page is loaded. We can modify the default visual properties of <detail> by Boolean values so that they are expanded when we load the page:

1 2 3 4

<details open>   <summary>Show/Hide me</summary>   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>

Note that there is no closed attribute, because as long as you remove the open property, the Closed property effect is performed.

<summary> elements
We've looked at it briefly.

's role. Because it is the phrase content, we can use the inline (inline) tag <span;>. Why do we have this idea? Perhaps it would be easier to control the display with an external style or, as the spec suggests, add a <label> tag to a FORM element. If he can make it work, at least it will help me:

1 2 3 4

<details>   <summary><label for="name">Name:</label></summary>   <input type="text" id="name" name="name" /> </details>

It is common sense that we should expand the content of <detail> elements in any location where we click Summary. But in this case, we clicked on <summary> did not expand the content, because you clicked <label> he will focus on the <input> tag-even though that part of the content is hidden in the <details> tag.
Obviously, at this point a better statement is needed, what do you think is going to happen in this place? Perhaps a browser manufacturer can look at the effect.

<details> element Multi-layer nesting

You can nest <details> in <details>, and you can see the effect in a perfect case :

1 2 3 4 5 6 7 8 9 10 11 12-13

<details>   <summary>Question 1</summary>   <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>   <details>     <summary>Related documents</summary>     <ul>       <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>       <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>       <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>       <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>     </ul>   </details> </details>

Use case

In what cases will use the <DETAILS>? The FAQ table may be our first idea. The accordion effect is often used in the FAQ list, so <details> is the best effect of this effect.
Given this range of content, it may be fixed in a certain area as we scroll through the content. like this?
You can also use <details> to manipulate blog comments, user profiles, download lists, complex forms, or the following applications as described in the specification:

An example of the <details>Element from the Spec

In fact, as long as you look at the wordpress I write, you will find a lot of opportunities to use <details>. Let's take a look at your ideas and ideas in the comments.

Style formatting

How do you define this style? At the same time, we can use pseudo class styles in WebKit browsers ::-webkit-details-marker . You can see this small case:

1 2 3 4 5

details summary::-webkit-details-marker {   background: red;   color: #fff;   font-size: 500%; }

We can also position this group of parts. This is the right float . This is how we initialize the effect.
How do we customize the default component icon? That is, with the attribute selector, you can use to detect whether the <details> element is open or closed, and then define a suitable background image for it. We have a similar effect in the following example, using :after pseudo-element elements defined as our favorite background picture:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

summary::-webkit-details-marker {   display: none } summary:after {   background: red;   border-radius: 5px;   content: "+";   color: #fff;   float: left;   font-size: 1.5em;   font-weight: bold;   margin: -5px 10px 0 0;   padding: 0;   text-align: center;   width: 20px; } details[open] summary:after {   content: "-"; }

In the example above, we use the text "+" and "-" to define the state of the component, which, depending on your design needs, you might want :before to use instead :after , both of which can use image as a class element.
The details of the [open] attribute selector can create a lot of interesting possibilities. Because we are good doctors, the following is the effect of our decoration , the following is the screen effect:

Styled <details>Element in Chrome

If we can use CSS animations to decorate the open and closed state, this design is more perfect, but so far we have not been able to do this.

Accessibility

Unfortunately, when we wrote this article, <details>h was unable to access the keyboard, andSteve Faulkner wrote :

Bottom line are, currently no keyboard support and no usable information to exposed assistive.

Try it yourself, if you use the mouse to open the <details> element, you can use the keyboard to reach the Content section, but you cannot use the keyboard to open and close the area. So at the moment this is not an ideal state, but we believe that this small country will soon be improved.

Backward compatibility

Before we complain about its inability to take effect in IE6, thanks to these smart people, we can offer elegant dog-like compatibility. These effects are also listed on the website below very handy collection of Cross-browser Polyfills, both of which require jQuery:

• <details> fallback via JQuery by Mathias Bynens
• Another <details> Alternative, also based on JQuery by Manuel Bieh

1 2 3 4 5

<script>   if (!("open" in document.createElement("details"))) {     alert("No details");   } </script>

Update: Thanks for the comments. The code above is not 100% reliable because he will fail in some chrome versions. You can use this Modernizr snippet.

Why do we use this type of interaction?

So, why is this effect in HTML5? As with other HTML5 effects, using this effect can be simpler. For example, time selection, date pickers, sliders, progress indicators, now this accordion effect can be easier to implement without using JavaScript. Who can think of what's next? It would be nice if it was a tabs label.

Summarize

In this article, we explain how to use the <details> and <summary> elements. <details> is a new element, through and <summary> elements through the browser can create accordion interactive effect.

Currently,<details> can only work in Chrome, but we expect it to change in the near future. There is only one CSS trick we can use ::-webkit-details-marker , but we have a lot of other CSS. Let us know in the comments about <details> elements of your experience and ideas in this area.

Original:details and summary elements
The details andsummary elements