JQuery noob: Show div on hover, click to toggle display..

Question

Hi, been playing with this for a few hours and can't figure it out.

jsFiddle example here.

Basically I want this to show on hover, and click it to toggle whether it is displayed or not. I thought this was the way to do it with display:block;, but I can't get it to work.

Thanks for any help.

Answer 1

Currently you're using $(this) in the .click(), but that's the <button> (#related-btn) not the <div> (#show-hide), I think what you want is this:

$("#related-btn").hover(function() {
    $("#show-hide").toggle("slow");
}).click(function() {
    $("#show-hide").toggle();
});

You can see an updated example here

Or if you wanted it animated in both cases, this is a bit shorter:

$("#related-btn").bind('mouseenter mouseleave click', function() {
  $("#show-hide").toggle("slow");
});

Or...if you want not to toggle it, but have a click "pin" it, you can do that like this:

$("#related-btn").hover(function() {
  if(!$(this).data('pinned'))
    $("#show-hide").toggle("slow");
}).click(function() {
  $(this).data('pinned', !$(this).data('pinned'));
});

You can see a demo of that here