JQuery expand and hide table tr td

No comments
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.

No comments :

Post a Comment