Multi Section form hiding and showing sections with jQuery -

i'm working on long form has fit 1 page. section should disappear when completed , next section should appear. know how dynamically can reuse multiple times. need create sort of breadcrumb previous sections can changed if wanted.

i form move on next section once user clicks radio button.

$('.section:not(.active)').hide(0);

.active {  }    .breadcrumbs>ul>li {    display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="breadcrumbs">    <ul>      <li><a href="#"></a></li>      <li><a href="#"></a></li>      <li><a href="#"></a></li>    </ul>  </div>    <form role="form">    <div class="section active">      <img src="http://placehold.it/350x150"/><br/>      <input type="text" id="name" name="name" placeholder="enter name"><br/>      <input type="radio" name="sex" value="male">male<br/>      <input type="radio" name="sex" value="female">female    </div>    <div class="section">      <img src="http://placehold.it/200x100"/><br/>      <input type="text" id="hobby" name="hobby" placeholder="enter hobby"><br/>      <input type="radio" name="fun" value="yes">yes<br/>      <input type="radio" name="fun" value="no">no    </div>    <div class="section">      <img src="http://placehold.it/200x100"/><br/>      <input type="text" id="wine" name="wine" placeholder="favorite wine"><br/>      <input type="radio" name="wine-type" value="red">red<br/>      <input type="radio" name="wine-type" value="white">white    </div>  </form>

this handles breadcrumbs requirement:

$('.breadcrumbs li').click(function() {   $('.section').removeclass('active');    $('.section').eq($(this).index())     .addclass('active'); }); 

this cause next section appear on radio button click:

$('input[type=radio]').click(function() {   $(this).parent()     .removeclass('active')     .next()     .addclass('active'); }); 

$('.breadcrumbs li').click(function() {    $('.section').removeclass('active');        $('.section').eq($(this).index())      .addclass('active');  });    $('input[type=radio]').click(function() {    $(this).parent()      .removeclass('active')      .next()      .addclass('active');  });

div.active {    display: block;  }    .section {    display: none;  }    .breadcrumbs>ul>li {    display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="breadcrumbs">    <ul>      <li><a href="#">page 1</a></li>      <li><a href="#">page 2</a></li>      <li><a href="#">page 3</a></li>    </ul>  </div>    <form role="form">    <div class="section active">      <img src="http://placehold.it/350x150"/><br/>      <input type="text" id="name" name="name" placeholder="enter name"><br/>      <input type="radio" name="sex" value="male">male<br/>      <input type="radio" name="sex" value="female">female    </div>    <div class="section">      <img src="http://placehold.it/200x100"/><br/>      <input type="text" id="hobby" name="hobby" placeholder="enter hobby"><br/>      <input type="radio" name="fun" value="yes">yes<br/>      <input type="radio" name="fun" value="no">no    </div>    <div class="section">      <img src="http://placehold.it/200x100"/><br/>      <input type="text" id="wine" name="wine" placeholder="favorite wine"><br/>      <input type="radio" name="wine-type" value="red">red<br/>      <input type="radio" name="wine-type" value="white">white    </div>  </form>