Question

I have been trying to set up the following script without success.

I have the element #num_11 which fades in a couple of other elements on hover and fades them out on mouseout. That’s working perfectly (which I am already quite proud of)

What I want is that if you CLICK on #num_11 that the other elements STAY visible. On click again, they should disappear again and the whole script go back to the original “mode”

$("#num_11").hover(
    function(){
        $("#identification li").each(function() {
            $("h1", this).fadeIn();
            $("span", this).addClass("opague");
        });
    },
    function(){
        $("#identification li").each(function() {
            $("h1", this).hide();
            $("span", this).removeClass("opague");
        });
    }
);

$("#num_11").click(function(){
    $(this).toggleClass('clicked');
});

What I have tried in the code above was putting $(“#num_11”).not(“.clicked”).hover( and $(“#num_11:not(“.clicked”)”).hover( as well as a if-else-query which ended up in chaos…

I would really appreciate your help with my challenge.

All the best,
K

Answer 1

try following code;

$("#num_11").hover(
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).fadeIn();
        $("span", this).addClass("opague");
    });
  }
},
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).hide();
        $("span", this).removeClass("opague");
    });
  }
});
$("#num_11").click(function(){
$(this).toggleClass('clicked');
});