SlideUp a div if any other div is slided down with jQuery

I have made a function to slidedown different div's by clicking different links. Following is basic code. However, there's a little problem that, for example, if i click on first link, it slides down div. Now If i click on next link, it keeps the first div, and slides down the second div. However I want to do it so that, if there is any div slided down, and I click on any link, it should slide up the previous div and slide down the newer one. I will apprici开发者_如何学Goate your help in this regard. Thanks.

$("a.about").click(function(){
    $("#about").slideDown("slow");
    });

$("a.info").click(function(){
    $("#info").slideDown("slow");
    });

$("a.contact").click(function(){
    $("#contact").slideDown("slow");
    });

you can do this generally by adding a class to all the divs you want to be able to control, and then slideUp()'ing that class at the beginning of every click.

$('a.xxx').click(function(){
    $('.sliders').slideUp()
    // slide down other div here
});

this will actually slide up ALL divs with the class 'sliders' but will give the illusion of the previously clicked div sliding up as only one should ever be down.

You might want to look into the jQuery UI accordion.

If the divs you're sliding are siblings, and the correspondence between classnames and IDs as described, you can do something like this:

var links = ['a.about','a.info','a.contact','a.etc'];

$( links.join(',') ).click( function(e){
  e.preventDefault();
  $('#' + this.className).siblings().slideUp('slow').end().slideDown('slow');
});

If all the links are within a container of some kind, you can simplify further:

$('div#nav-container').find('a').click( function(e){...} );

The easiest approach would be to give an extra generic classname to all of the elements you are trying to slide up/down, then connect the actual anchors to the elements, using the href attribute on the anchor. The below bit of javascript (with the changes to the HTML) will perform the same functions as your current javascript, as well as make it easy to add more sliders:

# the html
<a class='about slide-control' href='#about'>toggle the about section</a>
<a class='info slide-control' href='#info'>toggle the info section</a>
<a class='contact slide-control' href='#contact'>toggle the contact section</a>

<div class='slider' id='about'>
    this is the about section
</div>
<div class='slider' id='info'>
    this is the info section
</div>
<div class='slider' id='contact'>
    this is the contact section
</div>    

# the javascript
$('a.slide-control').click(function() {
    $('div.slider').slideUp();
    var target = $(this).attr('href');
    $(target).slideDown('slow');
});

You can add a new slider simply by adding the proper HTML:

<a class='slide-control' href='#new_section'>Tell me more about this new section!</a>

<div class='slider' id='new_section'>
    This is a great paragraph about the new section on our website!
</div>

Alternatively, you can use your existing classes and just add the .slideUp method call for your other elements before your .slideDown:

$('a.about').click(function() {
    $("#info").slideUp('slow');
    $("#contact").slideUp('slow');
    $("#about").slideDown('slow');
});

// repeat for each click handler