Question

Hi All I am trying to create a scenario where every time I click ‘switch’ I toggle between ‘#one’, ‘#two’ and ‘#three’

I can’t figure out how to start the jquery

<div class="switch">swicth</div>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

<style>
#one, #two, #three{
    display:none;
}
</style>

Answer 1

I would use class selector which will allow you to have any number of such div‘s.

DEMO: http://jsfiddle.net/m7gSn/2/

<div class="switch">swicth</div>
<div id="one" class="myc">1</div>
<div id="two" class="myc">2</div>
<div id="three" class="myc">3</div>  
<style> .myc { display:none; } </style>

JS:

var $myc= $('.myc');
var cp = 0;

$('.switch').click (function () {       
   $myc.hide().eq(cp++).show();       
   if (cp == $myc.length) cp = 0;        
});