jQuery toggling div visibility
- by Eef
I have a HTML document with the below setup:
<div class="main-div" style="padding: 5px; border: 1px solid green;">
<div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple">
First Div
<a href="#" class="control">Control</a>
</div>
<div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;">
Second Div
<a href="#" class="control">Control</a>
</div>
</div>
I also have a CSS class setup called hidden with display setup to none.
I have jQuery setup like so:
$('.control').click(function(){
var master = $(this).parent().parent();
var first_div = $(master).find(".first-div");
var second_div = $(master).find(".second-div");
$(first_div).toggleClass("hidden")
$(second_div).toggleClass("hidden")
});
This setup toggles the visibility of the divs, click the control button it hides one div and show the other.
However this just hides and shows each div in a flash. I am looking to add some animation to the transitioning of the divs, maybe have one slide up and the other slide down when the 'control' is clicked and vice versa but I am unable to achieve this.
Could anyone help out and give some advice on how to do this?
Cheer
Eef
