jQuery toggling div visibility

Question

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

Answer 1

Rather than using jQuery to modify the class of your elements and relying on CSS to hide them, I'd suggest you use jQuery Effects to fade/slide/bedazzle your elements in and out of view.

Answer 2

What you are describing is referred to as an accordion. If you want to use jQuery UI, there is built-in support for accordions. Check out the accordion demo over at the site. You can download the library and take a look at how it works. It will give you an idea of how this type of functionality can be implemented if you want to try doing it yourself.