Animation on click - css

Question

I just started fooling around with CSS. Im trying to make an animation (menu drop down) that should trigger on a button click. I found a good example, but in triggers on the hoover event and changes the style of a couple of divs.
I guess I need to set the style when my button is clicked, and then change it back when it is clicked again. But I cant get it to work.
Here is the CSS:
/* Static state */
#container {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #ccc;
}
.parent1 {
/* overall animation container */
height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: .5s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property:height;
-moz-transition-duration: .5s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: height;
transition-duration: .5s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
/* full content during animation *can* go here */
}
.parent3 {
/* animated, "folded" block */
height: 56px;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: .5s;
transform: rotateX(-90deg);
transform-origin: top;
}
/* Hover states to trigger animations */
#container:hover .parent1 { height: 111px; }
#container:hover .parent3 {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 111px;
}
And here is what I been working on.....
<script>
function fold()
{
var element = document.getElementById('parent1');
element.style.height= 111;
element = document.getElementById('parent3');
var prop = getTransformProperty(element);
element.style[prop] = 'rotateX(0deg)';
element.style.height= 111;
}
function getTransformProperty(element)
{
// Note that in some versions of IE9 it is critical that
// msTransform appear in this list before MozTransform
var properties = [
'transform',
'WebkitTransform',
'msTransform',
'MozTransform',
'OTransform'
];
var p;
while (p = properties.shift()) {
if (typeof element.style[p] != 'undefined') {
return p;
}
}
return false;
}
</script>
Any ideas?

Answer 1

You could save a lot of time and effort using -
jQuery UI accordion
<script>
$(function() {
$(".accordion").show().accordion({
heightStyle: "content",
collapsible: true,
active: false,
animate: {
duration: 1000,
easing: 'easeOutBounce'
},
});
})
</script>
Note that you can style this plugin any way you like,
.accordion {/* some style*/}
.ui-accordion-content {/* some style*/}
.accordion h6 {/* some style*/}
Here is a fiddle that shows how I've abused the accordion widget.

Answer 2

HERE IT IS EASY : JSFiddle
HTML
<ul>
<li>Something</li>
<li>Something Else</li>
<li>Another Thing</li>
<li>Or This</li>
</ul>
<br>
<br>
<h3>
Dropdown Example -
Amir Mehdi
</h3>
Javascript
$("div , li").click(function () {
$("ul").slideToggle(120);
});