CODEWITHSUNDEEP
jquerytoggle
Kyle
Kyle

Reputation: 11

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....

Upvotes: 1

Views: 7629

Answers (3)

Robin
Robin

Reputation: 21884

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.

Upvotes: 0

icktoofay
icktoofay

Reputation: 129011

$(".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.

Upvotes: 2

karim79
karim79

Reputation: 342635

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

You can try it here.

Upvotes: 4

Related Questions