title: Creating a multi step form
body: <p>Im using bootstrap and Im trying to create a multi step form with 3 steps but Im creating it without using bootstrap because I didnt find that multi step form component. But now to to the navigation part between steps, for example:</p>
  
  <p>If we are in the step 1 and we click "go to step 2" i want to show the step 2 div. Then in this div we have the step 2 div content and also the buttons "go to step 3" and the button "go back to step 1". In the step 3 div we have the step 3 content and the buttons "go back to step 2" and "ok".</p>
  
  <p>I was trying to do this jquery part using bootstrap tabs like this example:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;div class="nav nav-tabs" id="nav-tab" role="tablist"&gt;
      &lt;a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"&gt;Home&lt;/a&gt;
      &lt;a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"&gt;Profile&lt;/a&gt;
      &lt;a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"&gt;Contact&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="tab-content" id="nav-tabContent"&gt;
    &lt;div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"&gt;...&lt;/div&gt;
    &lt;div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But Im not having success doing this for the multi step form. Do you know if its possible to do that navigation between step divs using the example above and how? Or needs to be a different method?</p>
  
  <p>This is the code I have for the multi step form: </p>
  
  <p><a href="https://jsfiddle.net/jb9ow0jw/" rel="nofollow noreferrer">https://jsfiddle.net/jb9ow0jw/</a></p>
  
  <p><strong>Note:</strong> The user should only be able to interact with the "go to" and "go back" buttons not with the titles "Step 1", "Step 2" and "Step 3".</p>