Bootstrap

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

  <form>
<!-- begin Step 1 -->
<div class="row">
    <div class="col-md-6 here">
      <h2 class="color-black">Step 1</h2>
      <hr>
    </div>
 </div><!-- row -->
 
<div class="js-step-1">
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control js-show-panel-tip" placeholder="Email">
      </div>
    </div>
 </div><!-- row -->
  
 <div class="row">
   <div class="col-md-6 here">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control js-show-panel-tip" id="exampleInputPassword1" placeholder="Password">
      </div>
   </div>
 </div><!-- row -->
  
  <div class="row">
    <div class="col-md-12 text-center">
      <a class="btn btn-primary js-next-step" href="#" role="button">Continue to Step 2</a>
    </div>
  </div><!-- row -->
  
</div>
<!-- end Step 1 -->


<!-- begin Step 2 -->
<div class="row js-title-step">
    <div class="col-md-6 here">
      <h2 class="color-gray">Step 2</h2>
      <hr>
    </div>
</div><!-- row -->

<div class="step-2 js-step">
 <div class="row">
    <div class="col-md-6 here">
      <h2 class="color-black">Step 2</h2>
      <hr>
    </div>
 </div><!-- row -->
 
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="firstName">First name</label>
        <input type="text" class="form-control" placeholder="First name">
      </div>
    </div>
 </div><!-- row -->
 
 <div class="row">
    <div class="col-md-6 here">
      <div class="form-group">
        <label for="lastName">Last name</label>
        <input type="text" class="form-control" placeholder="Last...

SCSS

.bg-gray {
  background-color: #ddd;
}

.js-panel-tip {
  display: none;
}

.color-gray {
  color: #ddd;
}

.color-black {
  color: #333;
}

.step-2,
.step-3 {
  display: none;
}

JavaScript

$('.js-next-step').click(function(e) {
	e.preventDefault();
 
  // 1. Hide gray title
  $(this).parents().next().closest('.js-title-step').hide();
  
  // 2. Show next step div
  $(this).parents().next().closest('.js-step').show();
  
  // 3. Scroll to next step div
});