Using JQuery how to show and hide different div's onClick event

Question

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

Answer 1

How about this

Working Example here - add /edit to URL to edit the code

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

and HTML

      Toggle




    
 
        div1
    

    
 
        div2
    

    
 
        div3
    

This could easily be wrapped up in a plugin