CODEWITHSUNDEEP
htmlcss
Matt Hutch
Matt Hutch

Reputation: 463

Creating a open/close sliding animated div

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>

Upvotes: 0

Views: 58

Answers (1)

Matt
Matt

Reputation: 2288

just use css transitions 

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

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

Upvotes: 2

Related Questions