JSFiddle - React, Tailwind, and code Playground
by bluey
HTML
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<div id='d' class="container content">
<!----------------->
<!----------------->
<div id="box1" page_num='1' class="form_content">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="weight-300 color-white" style="margin-bottom: 40px">
Become a <strong>Driver</strong></h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="form-group">
<label class="color-white">First Name</label>
<input class="form-control color-white" name="name" placeholder="" required="" type="text" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="color-white">Last Name</label>
<input class="form-control" name="name" placeholder="" required="" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label class="color-white">Contact Number</label>
<input class="form-control" name="name" placeholder="" required="" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<button direction='next' class="btn btn-outline navlinks" data-href="#box2" type="submit">Apply</button>
</div>
</div>
</div>
<!----------------->
<!----------------->
<div id="box2" page_num='2' class="form_content">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="weight-300 color-white" style="margin-bottom: 40px">About <strong>You</strong></h1>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label...JavaScript
/**
- Notes
main conatainer of pages must be id=d
each page div must be id'd box1, box2, box3...
each page must have custom attr: page_num='1,2,3'
button must be uniquely defined in js to prevent clashes
each button must contain custom att: direction='next, back'
*/
$(document).ready(function(){
$('#d').children().hide();
$('#d :first-child').show();
totalPages=0;
$('#d div[page_num]').each(function() {
totalPages++;
// alert(x);
});
$('button').click(function(){
// alert($(this).parent().parent().parent().attr('page_num'));
//$(this).parent().parent().parent().hide();
// $(this).parent().parent().parent().toggle('slide', { direction: $('.mySelect').val() }, 400);
curPageNum = parseInt($(this).parent().parent().parent().attr('page_num'));
direction = $(this).attr('direction');
if (direction == 'next') {
nxtPg = curPageNum+1;
if (nxtPg > totalPages) {
nxtPg = totalPages;
}
$(this).parent().parent().parent().toggle('slide', { direction: 'left' }, 300), $('#box'+nxtPg).delay(600).toggle('slide', { direction: 'right' }, 900);
}
if (direction == 'back') {
nxtPg = curPageNum-1;
if (nxtPg < 1) {
nxtPg = 1;
}
$(this).parent().parent().parent().toggle('slide', { direction: 'right' }, 300), $('#box'+nxtPg).delay(600).toggle('slide', { direction: 'left' }, 900);
}
});
});