Question

http://jsfiddle.net/2CkKW/5/

I’m trying to have a button for comments in which you will press the first button, It will then change to the mouseover colour and show the “add comment” button. Then when the user clicks the comment button again it will go back to the “unhover” state and hide the “add comment” button.

Thanks for your help, Hope it’s not to badly worded to understand.

Answer 1

Just check if(showing == 0) condition inside the hover first handler. But instead of using a global variable you can check the visibility of the add comment button. Try this

$("#commentsempty").hover(
    function(){
        if(!$("#addcomment").is(':visible')){
          $(this).css("background-position", "-148px");
          $("#commentsstatus").css("color", "#35a4de");
        }
    },
    function(){
    $(this).css("background-position", "-185px");
    $("#commentsstatus").css("color", "#484848");
})

$("#commentsempty").click(function(){
    if(!$("#addcomment").is(':visible')){
        $("#addcomment").fadeIn(500);
        $(this).css("background-position", "-148px");
        $("#commentsstatus").css("color", "#35a4de");
    }else{
        $("#addcomment").fadeOut(500);
        $(this).css("background-position", "-185px");
        $("#commentsstatus").css("color", "#484848");
    }
});

Demo