<details open>
<summary>Drawer 1</summary>
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>
</ul>
</details>
<details>
<summary>Drawer 2</summary>
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>
</ul>
</details>
details {
background: rebeccapurple;
color: #ddd;
width: 300px;
border-radius: 4px;
margin-bottom: 5px;
}
summary {
padding: 10px;
}
summary:focus {
outline: none;
}
details ul {
background: #ddd;
margin: 0;
color: black;
padding: 10px;
border-radius: 0 0 4px 4px;
}
details li {
margin-left: 30px;
margin-top: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.