Animate size of element using CSS

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>

https://stackoverflow.com/questions/5003220/animate-element-to-auto-height-with-jquery — Paulie_D, May 18 '21 at 14:27
I think if you just keep height:0 for :not(.enabled) case and remove height for .enabled case, it will work as you expected. All you require is to remove height for .enabled case. — YATIN GUPTA, May 18 '21 at 14:30
I added example with ```height: 0;``` and ```height: auto;``` when enabled. Also you can move the border to the ```folder-body```. — prettyInPink, May 18 '21 at 14:33
You need to use max-height in order to have smooth transition. See : https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — SeeoX, May 18 '21 at 14:43

score 0 · Answer 1 · answered May 18 '21 at 14:30

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>

score 0 · Accepted Answer · answered May 18 '21 at 14:32

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>

Animate size of element using CSS

2 Answers2