<details>
<summary>Like Pokémon</summary>
<div class="content">
<ul>
<li>Pikachu</li>
<li>Charmander</li>
<li>Bulbasaur</li>
</ul>
</div>
</details>
:root {
interpolate-size: allow-keywords;
}
details::details-content {
display: block;
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.5s;
}
details[open]::details-content {
height: auto;
opacity: 1;
overflow: auto;
}
.content {
padding: 1em 1.5em;
border: 1px solid #eee;
}
ul,
li {
margin: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.