<div class="wrapper">
<form class="multi-form" action="#" method="POST">
<h1>Multi-Form</h1>
<fieldset class="active">
<legend>First Section</legend>
<div class="row">
<div class="small-12 columns">
<label for="">12 columns</label>
<input type="text" placeholder="12 columns" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Second Section</legend>
<div class="row">
<div class="small-12 medium-6 columns">
<label for="">6 columns</label>
<input type="text" placeholder="6 columns" />
</div>
<div class="small-12 medium-6 columns">
<label for="">6 columns</label>
<input type="text" placeholder="6 columns" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Third Section</legend>
<div class="row">
<div class="small-12 medium-4 columns">
<label for="">4 columns</label>
<input type="text" placeholder="4 columns" />
</div>
<div class="small-12 medium-4 columns">
<label for="">4 columns</label>
<input type="text" placeholder="4 columns" />
</div>
<div class="small-12 medium-4 columns">
<label for="">4 columns</label>
<input type="text" placeholder="4 columns" />
</div>
</div>
</fieldset>
<div class="buttons">
<a class="button secondary prev left">Prev</a>
<a class="button secondary next right">Next</a>
<button class="submit right">Submit</button>
</div>
</form>
</div>
.wrapper {
width: 900px;
max-width: 100%;
margin: auto;
}
form.multi-form {
padding: 20px;
fieldset:not(.active) {
display: none;
}
fieldset.active:first-of-type ~ .buttons {
.prev,
.submit {
display: none;
}
}
fieldset.active:not(:last-of-type) ~ .buttons {
.submit {
display: none;
}
}
fieldset.active:last-of-type ~ .buttons {
.next {
display: none;
}
}
}
View Compiled
$('form.multi-form a.next').click(function() {
$('fieldset.active').removeClass('active')
.next('fieldset').addClass('active');
});
$('form.multi-form a.prev').click(function() {
$('fieldset.active').removeClass('active')
.prev('fieldset').addClass('active');
})