How to show/hide a model in form?

Question

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags

1. My Projects

2. Add New Projects

3. My Projects Menu Click one form1 will be display?

4. Add New Projects Menu Click second form2 will be display?

Here my model code:

<div class="modal-body">
  <h2 class="text-uppercase text-center m-b-30">
    <a href="index.html" class="text-success">
      <span>All Projects</span>
    </a>
  </h2>

  &nbsp;&nbsp;
  <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a>
  &nbsp;&nbsp;
  <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a>
  <form class="form-horizontal" action="#" id="myprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>

  <form class="form-horizontal" action="#" id="addnewprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

My jQuery code:

<script type="text/javascript">
$(document).ready(function() {
    $("#myprojects").hide();
    $("#mp").click(function(e) {
        $("#myprojects").show();
        $("#mp").hide();

    });
});


$(document).ready(function() {
    $("#addnewprojects").hide();
    $("#anp").click(function(e) {
        $("#addnewprojects").show();
        $("#anp").hide();

    });
});  

</script>

my intention is which menu I will click that form will display in the model

Answer 1

Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.

 $("#myprojects").hide(); $("#mp").click(function(e) { $("#myprojects").show(); $("#addnewprojects").hide(); // $(this).hide(); $("#anp").show(); }); $("#anp").click(function(e) { $("#addnewprojects").show(); $("#myprojects").hide(); //$(this).hide(); $("#mp").show(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal-body"> <h2 class="text-uppercase text-center mb-30"> <a href="index.html" class="text-success"> <span>All Projects</span> </a> </h2> &nbsp;&nbsp; <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a> &nbsp;&nbsp; <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a> <form class="form-horizontal" action="#" id="myprojects"> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="username">Name</label> <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="emailaddress">Email address</label> <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="password">Password</label> <input class="form-control" type="password" required="" id="password" placeholder="Enter your password"> </div> </div> <div class="form-group mb-20"> <div class="col-xs-12"> <div class="checkbox checkbox-custom"> <input id="checkbox11" type="checkbox" checked> <label for="checkbox11"> I accept <a href="#">Terms and Conditions</a> </label> </div> </div> </div> <div class="form-group account-btn text-center mt-10"> <div class="col-xs-12"> <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button> </div> </div> </form> <form class="form-horizontal" action="#" id="addnewprojects"> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="username">Name1</label> <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="emailaddress">Email address1</label> <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com"> </div> </div> <div class="form-group mb-25"> <div class="col-xs-12"> <label for="password">Password</label> <input class="form-control" type="password" required="" id="password" placeholder="Enter your password"> </div> </div> <div class="form-group mb-20"> <div class="col-xs-12"> <div class="checkbox checkbox-custom"> <input id="checkbox11" type="checkbox" checked> <label for="checkbox11"> I accept <a href="#">Terms and Conditions1</a> </label> </div> </div> </div> <div class="form-group account-btn text-center mt-10"> <div class="col-xs-12"> <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button> </div> </div> </form> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>