What is the most efficient jQuery way to check / switch the attenuation of three elements?

Question

I have three sidebar buttons. In the click event, each opens a previously hidden div:

//Contribute Sidebar Actions $('#contributePod .facebookBtn, #contributeFacebook .close').click(function() { $('#contributeFacebook').fadeToggle('slow', function() { }); }); $('#contributePod .twitterBtn, #contributeTwitter .close').click(function() { $('#contributeTwitter').fadeToggle('slow', function() { }); }); $('#contributePod .flickrBtn, #contributeFlickr .close').click(function() { $('#contributeFlickr').fadeToggle('slow', function() { }); }); 

Here is the HTML part

 <div id="contributePod"> <h2>Contribute</h2> <a class="facebookBtn" href="#" title="Contribute on Facebook"></a> <a class="twitterBtn" href="#" title="Contribute on Twitter"></a> <a class="flickrBtn" href="#" title="Contribute on Flickr"></a> </div> <div class="contributeContainer" id="contributeFacebook"> <a class="close" href="#">X</a> <h2>Contribute on Facebook</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form method="post" action="" id="facebookForm" name="facebook_form"> <label>Comment</label> <textarea name="facebookComment" rows="1" cols="1"></textarea> <input class="contribSubmit btn" type="submit" value="Share" /> </form> </div> <div class="contributeContainer" id="contributeTwitter"> <a class="close" href="#">X</a> <h2>Contribute on Twitter</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form method="post" action="" id="twitterForm" name="twitter_form"> <label>Comment</label> <textarea name="twitterComment" rows="1" cols="1"></textarea> <input class="contribSubmit btn" type="submit" value="Share" /> </form> </div> <div class="contributeContainer" id="contributeFlickr"> <a class="close" href="#">X</a> <h2>Contribute on Flickr</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form method="post" action="" id="flickrForm" name="flickr_form"> <input class="btn" type="file" /> </form> </div> 

1) Is the method that I am doing the most effective?

2) What would I add to make sure that if one of the divs is turned on, and the user clicks to switch the second, that it starts to disappear the first open before showing the second div?

Answer 1

Here is my crack: http://jsfiddle.net/Skooljester/FJKz7/ . I needed to add the name value to a tags, but the function was reduced by a decent amount.

Answer 2

it should work

change html to:

 <div id="contributePod"> <h2>Contribute</h2> <a class="contributeFacebook" href="#" title="Contribute on Facebook"></a> <a class="contributeTwitter" href="#" title="Contribute on Twitter"></a> <a class="contributeFlickr" href="#" title="Contribute on Flickr"></a> </div> 

and javascript:

 $("#contributePod a").click(function(){ var which = $(this).attr("class"); var $container = $("#"+which); $container.siblings().is(":visible").fadeOut("slow",function(){ }); $container.fadeIn('slow',function(){ }); return false; }); $(".contributeContainer .close").click(function(){ $(this).parent().fadeOut("slow",function(){ }); return false; }); 

Answer 3

this should work too

  $ ('# contributePod .facebookBtn, #contributeFacebook .close'). toggle (
     function () {
         $ ('# contributeFacebook'). fadeIn ('slow');
          // more stuff
     },
     function () {
         $ ('# contributeFacebook'). fadeOut ('slow');
          // more stuff
     }
 );