How to make a slide(up/down) without jQuery?

Question

I am trying to make a slide(up/down) system for my collapse components (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>

height: auto; (It has no animation permission) – Dec 10 '19 at 05:00 — , Dec 10 '19 at 05:00

score 7 · Accepted Answer · answered Dec 10 '19 at 05:09

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

score 0 · Answer 2 · answered Dec 10 '19 at 04:52

0

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
}

answered Dec 10 '19 at 04:52

see sharper

11,505
8
46
65

Have some bugs :( – Dec 10 '19 at 05:00
What's the problem? – see sharper Dec 10 '19 at 05:01
//something bigger than what I need – Dec 10 '19 at 05:08
It just needs to be some value larger than your content is likely to occupy. Note that padding can be a problem. If the closed div shows content, then you need to have a wrapper div and set the padding there. – see sharper Dec 10 '19 at 05:10
padding is not problem, BOX-SIZING: BORDER-BOX; can fix it. – Dec 10 '19 at 05:17

score 0 · Answer 3 · answered Dec 10 '19 at 05:32

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?

How to make a slide(up/down) without jQuery?

3 Answers3