jQuery addClass & removeClass -

i new in jquery. have 2 div id="widget", default there .active class div1. want remove class when click on div2 , add .active class div2.

there html:

<div class="progress_widget">      <div id="widget" class="step1 active">         <h1>1</h1>         <h3>step 1 of 2</h3><h3 class="hide">choose heating system<br> estimate</h3>     </div>      <div class="step2" id="widget">         <h1>2</h1>         <h3>step 2 of 2</h3><h3 class="hide">tell how contact <br>you</h3>     </div>  </div> 

please me!!

firstly, can have 1 unique id per page

so changed them classes, so

<div class="widget step1 active">     <h1>1</h1>     <h3>step 1 of 2</h3><h3 class="hide">choose heating system<br> estimate</h3> </div>  <div class="step2 widget">     <h1>2</h1>     <h3>step 2 of 2</h3><h3 class="hide">tell how contact <br>you</h3> </div> 

and jquery, do

$('.widget').click(function() {     $('.widget').removeclass('active');     $(this).addclass('active'); }); 

this jquery code work more 2 divs, if decide add more elements class widgets work too.

this code does. 1. user clicks on element class widget 2. jquery removes classes of active elements class of widget 3. adds class of active 1 clicked on. $(this) refers 1 clicked on.