Question

I have copied Jquery code from another website and “Link one” is working fine. When I press on it, a popup div appear and when I click outside of the div it’s gone (which is fine). But “Link Two and Three popup divs” are not appear/disappear properly. Can you please enhance code? Please check out below link (what I have done so far)

http://jsfiddle.net/awaises/SNCtu/

Also please make sure, at a time only one div appear even I press “Link Two” or “Link Three”

Really appreciate your help!

Answer 1

Try this much shorter demo http://jsfiddle.net/vERmV/

Rest hope it fits the cause :)

code

$(function() {
    $('#hidden1,#hidden2,#hidden3').hide().click(function(e) {
        e.stopPropagation();
    });
    $(".cart-buttom1,.cart-buttom2,.cart-buttom3").click(function(e) {

        var id = $(this).attr('class').replace(/cart-buttom/, '');

        $('.popup').hide()
        $('#hidden' + id).animate({
            opacity: "toggle"
        });

        e.stopPropagation();
    });

    $(document).click(function() {
        $('#hidden1,#hidden2,#hidden3').fadeOut();
    });
});​