Hide Show Div using jQuery

0 2753

Sometimes we need to show or hide div element and there is no better way to do it than using jQuery.

Topics you may like:

How to get multiple checkbox values using jquery?

Add/Remove input fields dynamically using jquery in HTML for table

By using jquery you can hide and show div through a small script mentioned below:

<button type="button" class="btn btn-primary pull-right" id="hide"> X </button>
<!-- Above button is used to click for hide and show the div -->
<!-- Use Id in button to call the script -->

<!-- Start Div -->
<div id="dismiss_order"> 
<h4 align="center"> Orders Id: 001 </h4>
<p>Date: 27-05-2019</p>
<table class="table table-bordered">
  <thead>
      <tr><th scope="col"> Sr. No. </th>
      <th scope="col"> Title </th>
      <th scope="col"> Quantity </th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
     <th scope="row"> 1 </th> 
     <td> Double Side Tape </td>
     <td> 1 </td>
    </tr>
    
    <tr><th scope="row"> 2 </th> 
     <td> Scotch Tape with Dispensor </td>
     <td> 1 </td>
    </tr>
    </tbody>
</table>
</div>
<!-- End Div -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Call the above path to use the script -->

<!-- Start Script -->
<script type="text/javascript">
	 $(document).ready(function(){
    $('#hide').click(function() {
      $('#dismiss_order').toggle("slide"); // toggle is used to hide/show the section
    });
});

</script>
<!-- End Script -->

You can also use the class to show hide Div

<!-- Start Div -->
<div class="hide_vieworder"> 
<h4 align="center">Orders Id: 001</h4>
<p>Date: 27-05-2019</p>
<table class="table table-bordered">
  <thead>
      <tr><th scope="col"> Sr.No. </th>
      <th scope="col"> Title </th>
      <th scope="col"> Quantity </th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <th scope="row"> 1 </th> 
     <td> Double Side Tape </td>
     <td> 1 </td>
    </tr>
    
    <tr><th scope="row"> 2 </th> 
     <td> Scotch Tape with Dispensor </td>
     <td> 1 </td>
    </tr>
   </tbody>
</table>
</div>
<!-- End Div -->

<!-- Start Script -->
<script type="text/javascript">
    $(document).ready(function(){
    $('#hide').click(function() {
      $('.hide_vieworder').toggle("slide");
    });
});
</script>
<!-- End Div -->