jquery hide all open divs and toggle

I have 2 links and depending on which one they click on want to close all others and show only the information for that link.

Example:

<div class="shipping-container">
    <a href="#" class="ups">Show UPS info</a>
    <a href="#" class="fedex">Show Fedex info</a>
    <div class="ups info" style="display:none">the info for ups</div>
    <div class="fedex info" style="display:开发者_高级运维none">the info for fedex</div>
</div>

Any ideas how I can do this with Jquery toggle for clicking one of the links and hide all others if there open. I only want to show info for one shipping method at a time. Also I would like an option for the user to click showall and all of them are displayed, if possible. Thanks in advance....

---

$(".shipping-container a").click(function() {
    $("div.info").hide();
    $("div." + this.className).show();
});

You can try it here.

---

$(".shipping-container > a.ups").click(function() {
    $(".shipping-container > .info").hide();
    $(".shipping-container > .ups.info").show();
    return false;
});
$(".shipping-container > a.fedex").click(function() {
    $(".shipping-container > .info").hide();
    $(".shipping-container > .fedex.info").show();
    return false;
});
$(".shipping-container > a.showall").click(function() {
    $(".shipping-container > .info").show();
    return false;
});

Or, if you wanted shiny animations (and the ability to easily add more shipping types):

["ups", "fedex"].forEach(function(method) {
    $(".shipping-container > a."+method).click(function() {
        $(".shipping-container > .info:not(."+method+")").slideUp("slow");
        $(".shipping-container > ."+method+".info").slideDown("slow");
        return false;
    });
});
$(".shipping-container > a.showall").click(function() {
    $(".shipping-container > .info").slideDown("slow");
    return false;
});

A slightly modified example is here.

---

Almost same as above

$(".shipping-container a").click(function() {
    $("div.info").hide().filter("div." + this.className).show();
});

I dont know if this is more efficient than reselecting the div... it might be.

Also, if the html is the actual one, you might want to use methods like siblings for instance:

$(".shipping-container a").click(function() {
    $(this).siblings("div.info").hide().filter("div." + this.className).show();
});

I think it's quicker.