CSS and HTML only dropdown spoiler - html

Question

I am trying to create a CSS and HTML drop-down spoiler with open animation.
I started from this
jsfiddle
but margin-top:-100%; doesn't work very well.
margin-top:-100%;
Any solution for smooth animated dropdown container?

Answer 1

You have some error in your CSS. You specified .spoiler > div for show state and only .spoiler for hide state. You should specify the same thing for both and the animation will run smoothly.
.spoilerbutton {
display:block;
margin: 5px 0;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler > div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
padding:5px;
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
By the way You can also animate the max-height instead of margin like this :
.spoilerbutton {
display: block;
margin: 5px 0;
}
.spoiler {
overflow: hidden;
background: #f5f5f5;
}
.spoiler>div {
margin: 5px;
overflow: hidden;
transition: all 1s ease;
}
.spoilerbutton[value="Show"]+.spoiler>div {
max-height: 0;
}
.spoilerbutton[value="Hide"]+.spoiler>div {
max-height: 90px; /*use a big value here*/
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler">
<div>
PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE
</div>
</div>

Answer 2

For smooth animated dropdown container, maybe you can try this :
.spoiler > div {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: margin 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: margin 0.2s ease-in-out;
}
I hope his help you ! Am I answering your question?