Hide Show Div using jQuery

by Lalita 31-May-19

0 357


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


Share:


Comments

    Waiting for your comments

Leave a Reply