Creating a open/close sliding animated div

Question

I'm trying to make a simple sliding div which appears with one button and disappears with another. The problem is I can just about make it appear if I remove the css for the close it lets the open work. I've commented out the code that prevents the openImage from working. If someone can have a look at this and know where I'm going wrong that would be great.

Thanks in advance.

function closeImage() {
  document.getElementById("main-image").className = "closed";
}

function openImage() {
  document.getElementById("main-image").className = "open";
}

.closed {
  height: 0;
  overflow: hidden;
  background: red;
  //oz-animation: slide 1s backwards;
  //ebkit-animation: slide 1s backwards;
  //-animation: slide 1s backwards;
  //s-animation: slide 1s backwards;
  //imation: slide 1s backwards;
}

.open {
  height: 0;
  overflow: hidden;
  background: red;
  -moz-animation: slide 1s forwards;
  -webkit-animation: slide 1s forwards;
  -o-animation: slide 1s forwards;
  -ms-animation: slide 1s forwards;
  animation: slide 1s forwards;
}

@-moz-keyframes slide
/* Firefox */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@-webkit-keyframes slide
/* Safari and Chrome */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@-o-keyframes slide
/* Opera */

{
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}

@-ms-keyframes slide
/* IE10 */

{
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

@keyframes slide {
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}

<div id="main-image" class="closed"></div>
<button onclick="openImage();">Open Div</button>
<button onclick="closeImage();">Close Div</button>

Try using max-height instead. Possible duplicate https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — StefanBob, Mar 29 '18 at 16:04

Matt · Accepted Answer · 2018-03-29T16:09:14.843

2

just use css transitions

#main-image {
    height: 0px;
    overflow: hidden;
    background: red;
    transition: height 1s;
}

#main-image.open {
    height: 300px;
}

edited Mar 29 '18 at 16:09

answered Mar 29 '18 at 16:04

Matt

2,096
14
20

Can you provide an example of this functioning, if it isn't too much trouble? – Matt Hutch Mar 29 '18 at 16:30

Creating a open/close sliding animated div

1 Answers1