html/jquery multiple step form - go to next step depending on which radio button was selected -

i'm new jquery , need form, single form broken in multiple steps (7). in first step (see code below) have 5 radio buttons: school, friends, home , health, , activity. i'm trying achieve if user selects radio button school , clicks "next" button show div containing questions related school, if chooses friends show div friends related questions, , on... subject specific divs hidden on document load.

please nice, newbie here. on appreciated :)

<div class="form">     <h2>what interests you? (select one)</h2>      <label class="val" style="width:250px;color:red;">please select one</label><br>      <input type="radio" id="school" name="path" value="school" /> school <br>         <input type="radio" id="home" name="path" value="home" /> home <br>              <input type="radio" id="friends" name="path" value="friends" /> friends <br>                <input type="radio" id="activities" name="path" value="activities" /> activities <br>     <input type="radio" id="health" name="path" value="health" /> health <br>  </div>  <div class="clear"></div><!-- /clearfix -->  <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value="">next</button>  </div>       <!-- clearfix --><div class="clear"></div><!-- /clearfix -->  <div id="step1-1"></div>  <div id="step1-2"></div>  <div id="step1-3"></div>  <div id="step1-4"></div>  <div id="step1-5"></div> 

try on click of simple button

var val = $('input:radio[name=path]:checked').val();  switch (val ) { case 'school':   $('#step1-1').show();   break; case 'home':   $('#step1-2').show();   break; case 'friends':   $('#step1-3').show();   break; case 'activities':  $('#step1-4').show();   break; case 'health':   $('#step1-5').show();   break; default:  }