<div class='wrapper'>
	<form>
	<div class="form-section active" id="Form1">
		<header>
			<p>Basic Info</p>
		</header>	
		<div class="inputs">
			<div class="field">
				<label for="fname">First Name</label>
				<input type="text" id="fname" class="input" />
			</div>
			<div class="field">
				<label for="lname">Last Name</label>
				<input type="text" id="lname" class="input" />
			</div>
			<div class="field">
				<label for="email">Email Address</label>
				<input type="email" id="email" class="input" />
			</div>
			<button class="next" disabled>Next</button>
		</div>	
	</div>
	<div class="form-section" id="Form2">
		<header>
			<p>Avatar</p>
		</header>	
		<div class="inputs center">
			<div class="field">
				<label for="avatar" class="avatarUpload center" ><i class="fa fa-upload" aria-hidden="true"></i></label>
				<input type="file" id="avatar" style="display: none" class="file" />
			</div>
			<button class="prev">Previous</button>
			<button class="next" disabled>Next</button>
		</div>	
	</div>
	<div class="form-section" id="Form3">
		<header>
			<p>Bio</p>
		</header>	
		<div class="inputs">
			<div class="field">
				<label for="bio">Bio<label>
				<textarea id="bio"  class="input" ></textarea>
			</div>
			<button class="prev">Previous</button>
			<button class="next" disabled>Next</button>
		</div>	
	</div>
	<div class="form-section" id="Form4">
		<header>
			<p>Password</p>
		</header>	
		<div class="inputs">
			<div class="field">
				<label for="pass">Password<label>
				<input type="password" id="pass" class="input" />
			</div>
			<div class="field">
				<label for="pass2">Confirm Password<label>
				<input type="password" id="pass2" class="input" />
			</div>
			<button class='prev' >Previous</button>
			<button class='fin' disabled>Finsish</button>
		</div>	
	</div>			
</form>
</div>	
	
$color1: #df405a
$color2: #87314e
$color3: #512645
$color4: #311e3e

*
	box-sizing: border-box

input,
button,
textarea
	font-family: 'Cabin', sans-serif
	

body
	min-height: 100vh
	display: flex
	justify-content: center
	align-items: center
	padding: 20px
	font-family: 'Cabin', sans-serif

.wrapper
	width: 100%
	max-width: 960px
	margin: auto
	form
		.form-section
			widtH: 100%
			box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
			display: none
			&:first-child
				display: block
			header
				padding: 10px 40px
				background: $color1
				color: white
				p
					font-weight: bold
			.inputs
				padding: 40px
				&.center
					margin: 0 auto
					text-align: center
					.field, button.next
						margin: 0 auto
				button.next,
				button.prev,
				button.fin
					padding: 20px 60px
					border: none
					outline: none
					color: white
					background: $color1
					transition: 0.15s ease-in-out
					&:disabled
						background: #aaa
						&:hover
							background: #999
					&:hover
						background: darken($color1, 10%)
				.field
					label
						&.avatarUpload
							color: $color1
							font-size: 50px
							margin: 0px 0px 20px 0px
							width: 250px
							height: 250px
							border-radius: 50%
							border: 1px solid $color1
							text-align: center
							line-height: 250px
							transition: 0.15s ease-in-out
							&.center
								margin: 0px auto 20px auto
							&:hover,
								color: white
								background: $color1
							&.active
								background: #77EB63
								color: white
								border: 1px solid #77EB63
					input, label, 
					textarea
						display: block
						margin: 10px 0
						width: 100%
					input[type='text'],
					input[type='email'],
					input[type='password'],
					textarea
						padding: 10px 5px
						border: none
						border-bottom: 1px solid $color1
						outline: 0
						transition: 0.15s ease-in-out
						&:focus
							box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
					textarea
						width: 100%
						max-width: 100%
						min-heighT: 300px
View Compiled
$(document).on('click', 'button.next', function(e){
	
	e.preventDefault();
	
	if(!$(e.target).is(":disabled")){	
		var btnTarget = $(e.target).parents(".form-section").next(".form-section")

		$(".form-section").not(btnTarget).slideUp(350, function(){
			$(btnTarget).slideDown(350);
		});
	}

	
});
$(document).on('click', 'button.prev', function(e){
	
	e.preventDefault();
	
	if(!$(e.target).is(":disabled")){	
		var btnTarget = $(e.target).parents(".form-section").prev(".form-section")

		$(".form-section").not(btnTarget).slideUp(350, function(){
			$(btnTarget).slideDown(350);
		});
	}

	
});

$(".form-section").keyup( function(){
	
	$(this).find(".input").each( function(i){
		
		if(!$(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", false);
			$(this).parents(".form-section").find("button.fin").prop("disabled", false);
		}else if($(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", true);
			$(this).parents(".form-section").find("button.fin").prop("disabled", true);
		}
		
	});
	
		
	$(this).find("input[type='file']").on('change', function(e){
	
		
		if(!$(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", false);
			$(this).parents(".form-section").find("button.fin").prop("disabled", false);
			console.log("false");
		}else if($(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", true);
			$(this).parents(".form-section").find("button.fin").prop("disabled", true);
			console.log("true");
		}
	});
		
	
});
$(".form-section").each( function(){
	
	$(this).find(".input").each( function(i){
		
		if(!$(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", false);
			$(this).parents(".form-section").find("button.fin").prop("disabled", false);
		}else if($(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", true);
			$(this).parents(".form-section").find("button.fin").prop("disabled", true);
		}
		
	});
	
		
	$(this).find("input[type='file']").on('change', function(e){
		
		if(!$(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", false);
			$(this).parents(".form-section").find("button.fin").prop("disabled", false);
			$("label[for='"+ $(this).attr("id") + "']").addClass("active")
		}else if($(this).val().length == 0){
			$(this).parents(".form-section").find("button.next").prop("disabled", true);
			$(this).parents(".form-section").find("button.fin").prop("disabled", true);
		}
	});
		
	
});

$(document).on('click', 'button.fin', function(e){
	e.preventDefault();
	$(e.target).parents(".wrapper").slideUp(350);
	
	setTimeout( function(){
		$(e.target).parents("form").submit();
	}, 350);
	
	
});


Rerun