<div class="expanding-list">
<button id="toggle-button">
Toggle List
</button>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
* { box-sizing: border-box; }
html {
font: 100% system-ui;
margin: 0;
background: #607D8B;
}
.expanding-list {
max-width: 200px;
margin: 10vh auto;
background: #B0BEC5;
padding: 0.5em;
border-radius: 6px;
}
button[aria-expanded="true"] {
background: red;
}
#list {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: max-height 1.2s ease-in-out;
transition-timing-function: cubic-bezier(.22,.68,0,1.71);
li {
background: white;
border-radius: 2px;
margin: 0 0 2px 0;
padding: 2px;
text-align: center;
}
}
#list[data-open="true"] {
overflow: auto;
max-height: 16em;
animation: hide-scroll 1s backwards;
@keyframes hide-scroll {
from, to { overflow: hidden; }
}
}
#toggle-button {
display: block;
font: inherit;
background: none;
border: none;
padding: 0.5rem;
width: 100%;
}
View Compiled
const button = document.querySelector("#toggle-button");
const list = document.querySelector("#list");
button.addEventListener('click', ()=>{
const open = button.getAttribute('aria-expanded') === "true";
button.setAttribute('aria-expanded', !open);
//list.setAttribute('data-open', !open);
list.dataset.open = !open;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.