jQuery Chaining

[exsite_interactive]

Hey guys,

Hope someone can help me out with this. The page i am trying to get this working on is:
http://exsite.ca/client/eki/distribution.htm

Basically on the right hand side there are 4 options:
United States, Canada, International, and Online.

When United States is clicked a list of states appears, but the image does not fade out until a state is clicked. When Canada, International, or Online is clicked, i need the image in the left side to fade out, AND THEN the list of retailers in the selected category to fade in.

When a US State is clicked i need the image to fade out (if it is there) and then the list of retailers in that state to fade in.

So that’s the process i am looking for. Now for some code, i doubt this is the best way to do it so i am looking for suggestions:

HTML:
Right Side:

United States



Alabama


California


Colorado


Florida


Illinois


Indiana


Kentucky


Massachusetts


New Jersey


New York


Oregon


Pennsylvania


South Carolina


Texas


Utah




Canada

International

Online

Left Side: *note there are only 2 lists of retailers in there right now, online & california

Online


Neimanmarcus.com


Revolveclothing.com


Saks.com


Intermixonline.com


Swirl.com


Signer22.com


Styleetoile.com


shopSHEboutique.com






CALIFORNIA


Vionnet, Los Angeles


Bleu Clothing, Los Angeles, Westlake


Beckley, West Hollywood


Bella Rosa, Los Angeles


Catch Boutique, Los Angeles


Kitson LA, Los Angeles


Revolve, Cerritos


The Firm, San Francisco


Vionnet, Los Angeles


Magnolia, Calabasas


Ron Herman, Los Angeles, Beverly Hills, Brentwood, Malibu


Dressed, Montecito


Heidi Says, San Francisco


Showroom, Mill Valley


Matti D, Del Mar


Planet Blue, Malibu, Westlake


Bettina Duncan at Fred Segal, Santa Monica

This is the jQuery i have that will fade out the image and fade in the content, but currently it fades in ALL the content and also it performs the action when United States is clicked which i also dont want:

$(".distLevel1 span").click(function(){

$(".mainImg_contact").fadeOut("slow", function() {

$(".locationsWrap").fadeIn("slow");

});

});

[Author]

Posts