The details and summary were recently introduced with HTML 5.1 and allow you to create a block toggled opened or closed and that provides more information.
The summary should be nested inside the details element and provides a title for the expendable element. Hereβs how to use it:
<details>
<summary>Explaining all of the things</summary>
<p>Some explanation goes here...</p>
</details>
Explaining all of the things
Some explanation goes here...
Styling
Here how you could style the details element:
details {
background: hsla(153, 48%, 49%, .1);
padding: 1em;
border: 1px solid hsla(162, 76%, 32%, .3);
color: hsl(162, 76%, 32%);
border-radius: 5px;
}
details > p {
background: white;
padding: 0.5em 0.7em;
border-radius: 5px;
box-shadow: 1px 1px 3px hsla(162, 76%, 32%, .2);
font-size: 1em;
margin-top: 1em;
}
Explaining all of the things
Some explanation goes here...
Some more explanation...
You can also have the details pane expanded by default with the use of the open attribute:
<details open>
<summary>Price Breakdown</summary>
<dl>
<dt>Item 1:</dt> <dd>$4</dd>
<dt>Item 2:</dt> <dd>$12</dd>
<dt>Item 3:</dt> <dd>$32</dd>
</dl>
</details>
Price Breakdown
- Item 1:
- $4
- Item 2:
- $12
- Item 3:
- $32