<div class="container">
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="section collapsible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section">
<p>Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<button id="toggle-button">Toggle collapse</button>
// This stuff matters!
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 600px; // sadly, we're required to set at least the container height explicitly
}
.section {
overflow: hidden;
// note that we're transitioning flex, not height!
// transition: flex 0.3s ease-out;
// Safari only works if we do `all` here.
transition: all 0.3s ease-out;
height: auto;
flex: 1;
}
.section.collapsed {
flex: 0;
}
// This stuff doesn't matter!
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 10vh 10vw;
font-family: arial;
}
p {
margin: 10px;
}
.container {
border: 3px solid #ffeb3b;
margin: 0 auto;
max-width: 300px;
border-radius: 3px;
.section {
border: 3px solid #4caf50;
}
}
button {
display: block;
--webkit-appearance: none;
font-size: 18px;
border: none;
border-radius: 3px;
background: #2196f3;
color: white;
margin: 15px auto;
padding: 15px;
cursor: pointer;
transition: box-shadow 0.2s ease-out;
&:hover {
box-shadow: 0px 0px 15px lightgrey;
}
&:active {
box-shadow: 0px 0px 10px lightgrey;
}
&:focus {
outline: none;
}
}
View Compiled
// Look ma, [very little] Javascript!
document.querySelector("#toggle-button").addEventListener("click", function () {
document.querySelector(".section.collapsible").classList.toggle("collapsed");
});
This Pen doesn't use any external CSS resources.