Enquiry Email Form

Here are a few ways in which you can use the “click” event to trigger an action on the first click, and then trigger another action on the second click. I’ve actually seen a few different ways to use the double-click event, but here are the methods I use…

Method 1: Second-click event using the “toggle” event

In my opinion, the best and easiest way to implement a “second-click” action. The code below simply “shows” the content in the

tags the first time the “trigger” class is clicked, and then hides it on the second click.

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

Method 2: Second-click event using if/else conditions

You can always use an if/else condition by using the method below. It does exactly as the “toggle” method used above, but this particular example uses an “if” condition, which checks for the status (hidden or visible) of the

tags before it chooses which action to take. This is method is a bit more flexible for various reasons, which I won’t get into right now.

The “if hidden” condition is specific to the action used in this example- you may want to use it if you’re always wanting to hide/show elements. But if you’re wanting to trigger a different action on the clicks, you will need to create your own if/else conditions. This example just shows how if/else conditions can be used on second-click actions.

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

If anyone knows of any other ways to achieve the above or has any suggestions for performance improvements, please let me know.

  1. rajesh
    17/10/2012

    This script is really helpful for me & easy in use.
    THANKS FOT THAT.

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