Question

I have some JQuery handling a div click. If the div is clicked once it hides itself and shows another div (and posts to a php script in the background). If it is then clicked again, it’s supposed to hide the new div, show the new one again, and post more data to a different script, and so on.

It changes the first time (.f hides, .uf shows) but when I click ‘.uf’ nothing happens.

JQuery:

if($('.f').is(":visible")) {
    $('#follow').click(function() {
        var to_follow = $('.name').attr('id');
        $.ajax({  
            type: "POST",  
            url: "/bin/rel_p.php",  
            data: "y=" + to_follow,  
            success: function() {  
                $('.f').hide();
                $('.uf').show();
            }
        });
    });
}
else {
    $('#follow').click(function() {
        var to_unfollow = $('.name').attr('id');
        $.ajax({  
            type: "POST",  
            url: "/bin/relu_p.php",  
            data: "y=" + to_follow,  
            success: function() {  
                $('.uf').hide();
                $('.f').show();
            }
        });
    });
}

HTML:

            <div id="follow" class="f">
                <img src="img/icons/Follow.png">
                <h1>Follow</h1>
            </div>
            <div id="follow" class="uf" style="display:none;">
                <img src="img/icons/Unfollow.png">
                <h1>Unfollow</h1>
            </div>

Answer 1

use a class if you intend to use the selector twice, and don’t write the same code twice unless you have to:

$('.follow').on('click', function() {
    var is_f = $('.f').is(":visible"),
        to_follow = $('.name').attr('id'),
        give_me_an_u = is_f?'':'u';
    $.ajax({  
        type: "POST",  
        url: "/bin/rel" + give_me_an_u + "_p.php",  
        data: {y : to_follow}
    }).done(function() {
        $('.f, .uf').toggle();
    });
});