How do i hide a div on click of button for particular case

Question

There are four fields in the form.

And two buttons i.e next and ok . Next button is to jump from one field to another. And there is ok button to skip all the fields i.e it hides the div that I want to .

But what I want is, that when the user is on fourth field i.e is last one, and the user clicks NEXT button it should hide the div.

This is the Demo

This is the code:

<main>
      <div class="welcome-form">
        <img src="img/form-bg.png" alt="" class="img-responsive bg-image">
        <div class="form-overlay">
          <div class="container">
            <div class="launching-div">
              <h1 class="orange-text">Boom!</h1>
              <p>That’s all we needed from you to get started hold on tight.....</p>
            </div>
            <div class="form-inner">
              <h1>Welcome to Shoprocket</h1>
              <p>If your new to shoprocket we need to ask you <span class="orange-text">4 simple questions</span> to help us optimise your account. If your a regular feel free to skip this bit, you know the drill...</p>
              <form method="post">
                <div class="form-step-wrapper">
                  <hr>
                  <div class="form-step">
                    <div class="active"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                </div>

                <div class="form-main">

                  <ul style="display: block;" class="form-content">
                    <li>
                      <h2><span class="orange-text">1.</span> tell us your email</h2>
                    </li>
                    <li class="form-group">
                      <input type="text" name="email" placeholder="Type it in here" data-required="true" data-email="true" class="form-control">
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">2.</span>what are you selling?</h2></li>
                    <li class="form-group">
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">3.</span>how will you fulfill orders?</h2></li>
                    <li class="form-group" >
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                  <ul style="display: none;" class="form-content">
                    <li><h2><span class="orange-text">4.</span>where is your collection from?</h2></li>
                    <li class="form-group" >
                      <select data-required="true" name="option" class="selectpicker" multiple>
                        <option value="" disabled>Pick the ones that apply to you</option>
                        <option value="1">Shipping / post</option>
                        <option value="2">Customers can collect</option>
                        <option value="3">Other</option>
                      </select>
                    </li>
                  </ul>

                </div>

                <div class="form-navigation">
                  <span id="sf-msg" class="sf-msg-error"></span>
                  <button id="sf-prev" class="sf-button" type="button" style="display: none">Previous</button>
                  <button id="sf-next" class="sf-button" type="button">next</button>
                  <button id="sf-ok" type="button" class="sf-button">ok</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

This is the js code that I use to hide the div

$(document).ready(function() {
    $("#sf-ok").click(function(e) {
        $(".form-inner").hide();
    $(".launching-div").show();
});

Please help me out.

Answer 1

Better to do lots of code, you can simply use

http://www.jquery-steps.com/Examples

Answer 2

Here is the way you want to do. Use following in your jquery code.

if(t.active == 3){
    $(".form-inner").hide();
    $(".launching-div").show();
 }

Check Fiddle Here.