Enquiry Email Form

Not sure how many people would be looking for a function like this, but I needed it, so I suspect someone else out there might too. The code below is an example of how you can click on a trigger to show an element (the < P > tag in this case); it is then hidden when the cursor is hovered away from the trigger. Slightly different from the second-click to hide function– the function below combines the “click” and “hover” events. I used this particular function for a dropdown menu- when clicking on the parent link, the dropdown appeared- instead of having to click again on the parent link to close the dropdown, I made it so a simple hover-out closed the dropdown menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function() {
 $('.trigger').click(function() {
  $("p").show();
 }), $(".trigger").hover(function() {
  //do nothing if hovered over
 }, function(){
  //hide on hover out
  $("p").hide();
 });
});
</script>
</head>
<body>
<a href="#" class="trigger">Link</a>
<p style="display:none;">
 Show the text in this paragraph
</p>
</body>
  1. don
    05/09/2012

    Exactly what I was looking for, thanks!

  2. Paul
    03/11/2012

    Me too …. Perfect … Many Thanks!! 🙂

Learning & sharing

This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.

Please feel free to contribute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.



X