I am trying to make a slide(up/down) system for my collapse ponents (like bootstrap) but I can't get the height of the elements to animate(without height there is no possible way to animate the element I think so- if this is wrong, then how can I animate the element?)!

NOTE:   [I want to use pure javascript]

document.getElementById('btn').addEventListener('click', function(){
  this.nextElementSibling.classList.toggle('active');
})

body{
  font-family: Segoe UI;
  font-size: 1rem;
  line-height: 1.5;
}

.collapse{
  border: 1px solid #e7e7e7;
  border-radius: .25rem;
  overflow: hidden;
}

#btn{
  padding: .75rem 1.25rem;
  width: 100%;
  border: none;
  font-size: inherit;
  background-color: #fff;
  cursor: pointer;
}

#btn:focus{
  outline: 0;
}

.collapse-content{
  font-size: 95%;
  padding: .75rem .75rem;
  display: none;
}
.collapse-content.active{
  display: block;
}

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
  </div>
</div>

I am trying to make a slide(up/down) system for my collapse ponents (like bootstrap) but I can't get the height of the elements to animate(without height there is no possible way to animate the element I think so- if this is wrong, then how can I animate the element?)!

NOTE:   [I want to use pure javascript]

document.getElementById('btn').addEventListener('click', function(){
  this.nextElementSibling.classList.toggle('active');
})

body{
  font-family: Segoe UI;
  font-size: 1rem;
  line-height: 1.5;
}

.collapse{
  border: 1px solid #e7e7e7;
  border-radius: .25rem;
  overflow: hidden;
}

#btn{
  padding: .75rem 1.25rem;
  width: 100%;
  border: none;
  font-size: inherit;
  background-color: #fff;
  cursor: pointer;
}

#btn:focus{
  outline: 0;
}

.collapse-content{
  font-size: 95%;
  padding: .75rem .75rem;
  display: none;
}
.collapse-content.active{
  display: block;
}

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
  </div>
</div>

• javascript
• css

• height: auto; (It has no animation permission) – user12084454 Commented Dec 10, 2019 at 5:00

3 Answers 3

Bare-bones vanilla javascript implementation that'll account for any internal height (with consistent transition speed) can be achieved with some minor changes to the markup.

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-wrapper">
      <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
  </div>
  </div>
</div>

Note the addition of the collapse-wrapper div. This'll allow you to render the content and measure its height without actually displaying the content. Then it's just a simple case of showing/hiding the content on click:

* {
  box-sizing: border-box;
}

.collapse-wrapper {
  overflow: hidden;
  transition: all 300ms ease-in;
}

const wrapper = document.querySelector('.collapse-wrapper')
const content = document.querySelector('.collapse-content')
const button = document.getElementById('btn')
let open = true

// Set initial height to content height, if shown by default
if (open) {
  wrapper.style.height = `${content.getBoundingClientRect().height}px`
}


function toggleOpen () {
  if (open) {
      wrapper.style.height = '0px'
      open = false
  } else {
    const height = content.getBoundingClientRect().height
    wrapper.style.height = `${height}px`;
    open = true
  }
}

button.addEventListener('click', toggleOpen)

Here's a fiddle

You need to use max-height. Yes, it's nasty, since it means you need to set some arbitrary max height that may need to be adjusted later if the content grows. However, you cannot animate height in this situation because the height is not defined before the content opens.

Something like:

.collapse-content{
  font-size: 95%;
  padding: .75rem .75rem;
  max-height: 0;
  transition: max-height .3s;
}
.collapse-content.active{
  max-height: 200px; //something bigger than what you need
}

function slide(){
document.getElementById("sliding").style.maxHeight = "1000px";
}

#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}

<button onclick ="slide();">Slide it</button>
<div id = "sliding">
<h1>It works</h1>
<p>Hello there</p>
</div>

This is sort of hacky because you have to set maxHeight to the largest you think your content will get.

Source: How can I transition height: 0; to height: auto; using CSS?