Javascript – Using JQuery how to show and hide different div’s onClick event


I would like to show a div based on the Onclick event of an link.

First Click – Show div1
Second Click – Hide remaining div's and Show div2
Third Click – Hide remaining div's and show div3
Fourth Click – Hide remaining div's and show div1 => repeat the loop and goes on..

Code Follows:

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>

<div id='div1' style="display:none;"> 
  <!-- content -->

<div id='div2' style="display:none;"> 
  <!-- content -->

<div id='div3' style="display:none;"> 
  <!-- content -->

Jquery Code :

$(document).ready(function() {

The above code shows all divs on first click itself but it should show div1 on first click as mentioned.

Best Solution

I'll try my shot.

EDIT: After second though, to avoid global variable use it's better to do the following

$(document).ready(function() {
        var counter = 0;
        return function()
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");