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


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

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