Question

So here is my dilemma. Been trucking on this Jquery extreme code here and I need help telling if a certain link is showing or not. Here is what I have.

The toggles:

<a href="#" id="visbilitybutton" class="button" title="Visible"><span class="icon icon84"></span></a>

<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>

(notice the only thing that is different is the icon number) These need to toggle back and forth when someone clicks the #visbilitybutton. Not sure of the best way to do this and to capture what is selected as well.

The only code I have currently makes the toggle go one way, but doesn’t go back when clicked again.

 $(document).ready(function () { 
    $('#visbilitybutton').click(function() {
         $(this).replaceWith('<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>');
    }); 
    });

Answer 1

First things first, you shouldn’t have multiple identical id attributes on your page. Make visibilitybutton a class.

Anyways, you can use the jQuery toggle() function to specify what to do on each consecutive click:

$(".visibilitybutton").toggle(function(){
    $(this)
        .attr("title","Invisible")
        .find("span").toggleClass("icon84 icon85");
}, function(){
    $(this)
        .attr("title","Visible")
        .find("span").toggleClass("icon84 icon85");
});

If you want to be more efficient, you can do it all in one fell jQuery swoop like so, with some good techniques:

var vis = ["Invisible","Visible"];
$(".visibilitybutton").click(function(){
    var i = 0;
    $(this)
        .attr("title",vis[i])
        .find("span").toggleClass("icon84 icon85");
    i = (i==0)?1:0;
});

Even more so would be to make a class that hides the element when added to it and shows it when you remove it (a classname with display:none applied in the CSS works fine):

$(".visibilitybutton").click(function(){
    $(this)
        .toggleClass("hide")
        .find("span").toggleClass("icon84 icon85");
});