I've tried my hand at creating a simple multistep system for a form. I used this CodePen as a base. I'm not too Jquery savvy so I'm thinking there could be smarter ways to accomplish what I have done, but I think for its use case it's rather lightweight.
Could the code be simpler? If so how? My original Fiddle
$(document).ready(function(e) {
// get number of steps
const numberPanels = $('.ms-panel').length;
// console.log('Total Panels - ' + numberPanels);
var clicked = null;
function panelNavigator() {
// determine position and store for use
let currentIndex = Number($('.ms-panel-current').attr('data-panel'));
// console.log('Current Panel - ' + currentIndex);
// percentage increase
// const percentage = (currentIndex * 100) / numberPanels;
// $('.progress-inner').width(percentage + '%');
// percentage decrease
// const percentage = ((currentIndex - 1) * 100) / numberPanels + 1;
// $('.progress-inner').width(percentage + '%');
if (clicked == 'true') {
// move to next panel
$('.ms-panel-current').hide();
$('.ms-panel-current').removeClass('ms-panel-current');
$('.ms-panel-step-' + (currentIndex + 1)).show().addClass('ms-panel-current');
// console.log(".ms-next Click");
} else if (clicked == 'false') {
// move back a panel
$('.ms-panel-current').hide();
$('.ms-panel-current').removeClass('ms-panel-current');
$('.ms-panel-step-' + (currentIndex - 1)).show().addClass('ms-panel-current');
// console.log(".ms-back Click");
}
// set current panel position
currentIndex = Number($('.ms-panel-current').attr('data-panel'));
// not starting panel? show back button
if (currentIndex > 1) {
$('.ms-back').removeClass('ms-btn-d-none');
}
// is starting panel? remove back button
if (currentIndex == 1) {
$('.ms-back').addClass('ms-btn-d-none');
} else if ($('.ms-next').hasClass('ms-btn-d-none')) {
$('.ms-next').removeClass('ms-btn-d-none');
}
// is last panel? remove next button
if (currentIndex + 1 == numberPanels + 1) {
$('.ms-next').addClass('ms-btn-d-none');
}
}
// next panel button
$('.ms-next').click(function(e) {
clicked = 'true';
panelNavigator();
});
// back panel button
$('.ms-back').click(function(e) {
clicked = 'false';
panelNavigator();
});
panelNavigator();
});
// To-do. Restrict panel movement if no input detected.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
a {
display: block;
padding: 0.3em 0.5em;
background-color: #ccc;
border-radius: 3.33px;
color: #1c1c1c;
transition: ease all 0.3s;
margin-right: 0.3em;
text-decoration: none;
}
a:hover {
background-color: #1c1c1c;
color: #ccc;
transition: ease all 0.3s;
}
a:last-child {
margin-right: 0;
}
.btn-wrap {
text-align: center;
width: 20%;
display: flex;
flex-direction: row;
margin: 0 auto;
margin-top: -70px;
}
h1 {
display: block;
margin: 0 auto;
text-align: center;
}
/* ms-css */
.ms-panel-group {
position: relative;
}
.ms-panel {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f;
}
.ms-panel:not(.ms-panel-current) {
visibility: hidden;
opacity: 0;
display: none;
}
.ms-btn-d-none {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ms-panel-group">
<div class="ms-panel ms-panel-step-1 ms-panel-current" data-panel="1">
<h1>
Testing One
</h1>
</div>
<div class="ms-panel ms-panel-step-2" data-panel="2">
<h1>
Testing Two
</h1>
</div>
<div class="ms-panel ms-panel-step-3" data-panel="3">
<h1>
Testing Three
</h1>
</div>
<div class="ms-panel ms-panel-step-4" data-panel="4">
<h1>
Testing Four
</h1>
</div>
<div class="ms-panel ms-panel-step-5" data-panel="5">
<h1>
Testing Five
</h1>
</div>
<div class="btn-wrap">
<a href="javascript:;" class="ms-btn ms-back">Back</a>
<a href="javascript:;" class="ms-btn ms-next">Next</a>
</div>
</div>