JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<div id="contributePod">
            <h2>Contribute</h2>
            <a class="facebookBtn" href="#" name="contributeFacebook" title="Contribute on Facebook">Contribute on Facebook</a>
            <a class="twitterBtn" href="#" name="contributeTwitter" title="Contribute on Twitter">Contribute on Twitter</a>
            <a class="flickrBtn" href="#" name="contributeFlickr" title="Contribute on Flickr">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" />
           ...

JavaScript

$(".contributeContainer").hide();
$("#contributePod a").click(function(){
    var aName = $(this).attr("name");
    $(".contributeContainer").fadeOut("fast");
    $("#"+aName).fadeIn("slow");
});
$(".contributeContainer a").click(function(){
    $(this).parent(".contributeContainer").fadeOut("fast");
});