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>