JQuery alternate div content and AJAX post url on each click - php

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();
});
});