I'm hoping to create a cool animation effect where a certain part of a div expands to 100% width when clicked, and then reverts back to its original height on a second click. I've tried writing some code for this, but it's not working as expected. Can anyone provide assistance?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>