Animate size of element using CSS - html

Question

I'm trying to animate the size of .folder because otherwise the background stays.
- Run the code snippet. It will explain the problem.
I don't want set fixed values:
.enabled > .folder-body {
height: 100px;
}
:not(.enabled) > .folder-body {
height: 0px;
}
I tried using transform but i couldn't get it to work.
(Styled Version)
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
border: 2px solid black;
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
transition: all 0.2s ease-out;
}
.enabled>.folder-body {
transform: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
visibility: visible;
}
:not(.enabled)>.folder-body {
transform: translateY(-100%);
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
visibility: hidden;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>

Answer 1

Example with height: 0 to height: auto.
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
padding: 0 10px;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
transition: all 0.2s ease-out;
height: 0;
border: 2px solid black;
box-sizing: border-box;
padding: 0px;
}
.enabled>.folder-body {
padding: 10px;
}
.enabled>.folder-body {
transform: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
visibility: visible;
height: auto;
}
:not(.enabled)>.folder-body {
transform: translateY(-100%);
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
visibility: hidden;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>

Answer 2

You can do it by setting the max-height of the element to something bigger than your box will ever get.
Then you can close it by setting max-height: 0.
I didn't think of this. Here's a CSS Tricks article and a post on dev.to.
const folder = document.querySelector('#folder');
const header = document.querySelector('#header');
header.addEventListener('click', () => {
folder.classList.toggle('enabled');
});
p {
margin: 0;
}
.folder {
border: 2px solid black;
overflow: hidden;
}
.folder-header {
display: flex;
align-items: center;
color: white;
background-color: black;
}
.folder-header>svg {
height: 15px;
fill: white;
transition: all 0.2s ease-out;
}
.enabled>.folder-header>svg {
transform: rotateZ(90deg);
}
.folder-body {
max-height: 500px;
transition: all 0.2s ease-out;
}
.enabled>.folder-body {
max-height: 500px;
}
:not(.enabled)>.folder-body {
max-height: 0;
}
<div class="folder disabled" id="folder">
<div class="folder-header" id="header">
<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0 17 10-17 10z" />
</svg>
<h2>Menu</h2>
</div>
<p class="folder-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
</p>
</div>