Question

I’ve got three sidebar buttons. On a 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 portion

<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 way I’m doing that the most efficient?

2) What would I add to make it so that if one of the divs is toggled on, and a user clicks to toggle a second, that it fades out the first opened one before showing the second div?

Answer 1

Here’s my crack at it: http://jsfiddle.net/Skooljester/FJKz7/. I had to add a name value to your a tags, but the function was shortened a decent amount.