<form>
<div id="step-1" style="display: block">
<label for="username">Username</label>
<input type="text" name="username" id="username">
<button type="button" onclick="next(2)">Next</button>
</div>
<div id="step-2" style="display: none">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<button type="button" onclick="next(3)">Next</button>
</div>
<div id="step-3" class="hidden" style="display: none">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<button type="button" onclick="next(4)">Next</button>
</div>
<div id="step-4" style="display: none">
<button type="submit">Submit</button>
</div>
</form>function next(id) {
var currentElement = document.getElementById('step-'+(id-1));
var nextElement = document.getElementById('step-'+id);
currentElement.style.display = 'none';
nextElement.style.display = 'block';
}