JQuery expand and hide table tr td

By | August 8, 2020
Expanding and hiding table tr td in jQuery is not very tough job. You can make this happen with just a some lines of jQuery codes. Here in this tutorial, I am going to create a simple accordion using table tr td.

First of all, we will create a index.html file and put below code.

 <table>
 <tr>
 <td><a class="more" href="#"><h1>What is Lorem Ipsum?h1>a>
 td>
 tr>
 <tr>
 <td colspan="10"><p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
p>td>
 tr>
 <tr>
 <td><a class="more" href="#"><h1>Where does it come from?h1>a>
 td>
 tr>
 <tr>
 <td colspan="10"><p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
p>td>
 tr>
table>

And then add jQuery function like:

<script type="text/javascript">
$('.more').on('click', function(event) {
 $(this).closest('tr').next().toggle();
});
script>

Now run this file in your favorite browser. You will see the output as below, if everything is correct.

And finally, here is the complete code:

<html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">script>
head>
 <body>
 <div>
 <table>
 <tr>
 <td><a class="more" href="#"><h1>What is Lorem Ipsum?h1>a>
 td>
 tr>
 <tr>
 <td colspan="10"><p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
p>td>
 tr>
 <tr>
 <td><a class="more" href="#"><h1>Where does it come from?h1>a>
 td>
 tr>
 <tr>
 <td colspan="10"><p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
p>td>
 tr>
table>
 div> 
<script type="text/javascript">
$('.more').on('click', function(event) {
 $(this).closest('tr').next().toggle();
});
script>
 body>
 html>

Does it work for you? Please do let me know, in the comment box below. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *