Hide Show Div using JQuery | How can I show and hide div on mouse click using jQuery
×


Hide Show Div using jQuery

3162

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 -->

This is how you could show or hide div. Just use this code and see for yourself.



Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments