The Summary and Details elements are used to create an accordian-like effect. Essentially the user "clicks" on a heading and a section opens beneath it. This can be accomplished using CSS or JavaScript; however, the HTML5 elements presented here are MUCH easier -- but not universally available. Note that many browsers do not yet support this.
Responsive Web Design
Ethan Marcotte 2010: combines flexible grid layout, flexible images/media, and media queries so that web content is presented in the most relevant format for the viewport or device in question
Bryan Rieger
“The absence of support for media queries is in fact the first media query.”
HTML Code
<details>
<summary>Responsive Web Design</summary>
<p>
Ethan Marcotte 2010: combines flexible grid layout, flexible images/media, and media queries so that web content is presented in the most relevant format for the viewport or device in question
</p>
</details>
<details>
<summary>Bryan Rieger</summary>
<p> “The absence of support for media queries is in fact the first media query.” </p>
</details>