Creating a open/close sliding animated div - html

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>

Answer 1

just use css transitions
#main-image {
height: 0px;
overflow: hidden;
background: red;
transition: height 1s;
}
#main-image.open {
height: 300px;
}