jquery toggle multiple divs turning one on and the rest off

Question

Greetings, I'm trying to think of a way to use an accordion widget (which I'm currently using, h3 is the trigger) that when an h3 is selected another div appears, then when a different h3 is selected, a new div appears and the other disappears and so on.

so I have a three column layout, left column is my accordion widget, when the h3 is selected a middle div will appear (animation doesn't matter) and a floating right column within that div to give the appearance of a three column layout which the right column will be used to show/hide contents within that middle div. With me still????

Keep in mind that the first h3 is open by default, so there would be a related middle column open as well and floating right column as well within but will disappear when another h3 is selected and so on.

My jquery/javascript is minimal at best and I can't think of any direction to go with this.

Do I use the toggle? show/hide? Any ideas would be greatly appreciated!

So I guess what I'm trying to do is give the effect that content is being populated from links within the divs to show/hide, toggle or something when the user clicks a link rather than display a laundry list of items/content.

Answer 1

Based on what you described, I coded up a small example. Please take a look at this for a starting point and comment with any questions you have. Hope this is a good starting point for you.

View the source for the exact code.

http://jsbin.com/ixaco

Answer 2

Thanks T B, that's exactly what I was looking for. With the code that you have given, would you be able to say if it's possible to add the Jquery Ui effects to the populating divs from show/hide? Was thinking of like a blind effect or something. Was curious since I'm already using the UI accordion widget as my left column. Incase anyone wonders why I'm calling the UI library to begin with.

Your code:

$(function(){
  $("h3").click(function(){
    $(".content").hide();
    $(this).next().show();
  });
  $("h3:first").click();
});

#

If I add "blind":

   $(".content").hide(blind);
    $(this).next().show(blind);

Something to that effect I suppose...basically to just fancy it up a bit

Thanks Again.