Question

$(function() {
    $(".popup").hide();
    $(".clickMe").mouseover(function () {       
        $(".popup").show();
    }).mouseout(function() {
        $(".popup").hide();//Set this to default hide
    }); 
});

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<a class="clickMe" href="#"> Click here to see hidden item.</>
<div class="popup"> You've found me! </div>

I found this code that i would love to implement but unsure how. Instead of mouseover, how can i set it to onclick call instead? Thanks for your time.

Answer 1

This would do it

$(function() { 
  $(".popup").hide();                 //Hide the popup first
  $(".clickMe").click(function () {   //Attach a click event to the .clickMe
        $(".popup").toggle();              //Toggle the visibility of the popup
  });
}); 

So all i’ve done is change the mouseover and mouseout events for a single click event for the element with a class of .clickMe. Then used a jQuery toggle effect which will show or display the div depending on whether it is already visible, hence ‘toggle’ the div. Look here for more info