CODEWITHSUNDEEP
jquery
Najib Marzouk
Najib Marzouk

Reputation: 355

how can i hide and show form use jquery

I have 2 tables, at the beginning I want to hide the table 2 and when I click on the validate button I want to hide the table 1 and show the table 2,but in my case he hides all the tables, help me please. my tables:

    <div>
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>

</table>

 <div class="form-group col-md-offset-5 ">
    <button id="hide" class="btn btn-success " type="submit">valider</button>
  </div>

</div>
<!------table2 ------>
<div>
   <table class="table table-bordered">
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
  </table>
</div>

my code jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("div").hide();
  });
  $("#show").click(function(){
    $("div").show();
  });
});
</script>

Upvotes: 0

Views: 29

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can set id for div and use $('#form1').hide()

To hide form2 you can use css

#form2{
display:none;
}

Click validate event

$("#hide").click(function(){
    $("#form1").hide();
     $("#form2").show();
  });


$(document).ready(function(){
  $("#hide").click(function(){
    $("#form1").hide();
     $("#form2").show();
  });
  
});
#form2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>

</table>

 <div class="form-group col-md-offset-5 ">
    <button id="hide" class="btn btn-success " type="submit">valider</button>
  </div>

</div>
<!------table2 ------>
<div id='form2'>
   <table class="table table-bordered">
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
  </table>
</div>

Upvotes: 1

Related Questions