Stop specific content from loading on page then Load it specifically after click on hyperlink to handle load of data on page

Question

My wordpress webpage is full of table rows, every row have more content to show on same page, as you can see in 5th row of table. But I don't want to load all data when page opens. I just want to show simple table row as you can see top 4 rows of table but when user click on "View Detail" Hyperlink, more content must be load at that time for single row and slide down as shown in row 5 and at same time, other earlier Slide down opened row should be automatically slide up/close. One row should be slide down/open at one time

This is only some cloned dummy sample data to show you

Display: none already used but not able to reduce the load on page

Please help me on this

 td {border: 1px solid black; } 

 <table> <tbody> <tr> <td>03-April-2018</td> <td>Row 1 Sample td 1</td> <td>Row 1 Sample td 2</td> <td><a href="#">View Detail</a></td> </tr> <tr> <td>03-April-2018</td> <td>Row 2 Sample td 1</td> <td>Row 2 Sample td 2</td> <td><a href="#">View Detail</a></td> </tr> <tr> <td>03-April-2018</td> <td>Row 3 Sample td 1</td> <td>Row 3 Sample td 2</td> <td><a href="#">View Detail</a></td> </tr> <tr> <td>03-April-2018</td> <td>Row 4 Sample td 1</td> <td>Row 4 Sample td 2</td> <td><a href="#">View Detail</a></td> </tr> <tr> <td>03-April-2018</td> <td>Row 5 Sample td 1</td> <td>Row 5 Sample td 2</td> <td><a href="#">View Detail</a></td> </tr> <tr> <td colspan="4"> <p style="text-align: center; font-size: 17px; margin-top: -10px;">↓</p> <div class="a" style="border: 1px solid black; padding: 1px;"><b>Detail heading 1 : </b> Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text <br> <b>Detail heading 2 : </b> Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text Details sample text and related details have been given below… <iframe id="b" src="https://docs.google.com/gview?embedded=true&amp;url=http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" width="auto" height="700"></iframe></div></td> </tr> </tbody> </table> 

Answer 1

You can simply add .details class for example to that row you wanna hide.

Then by jquery

$(function()
    $("body").ready (function (){
         $("table .details").hide();
         $(".yourbtn).click(function (){
             $(this).closest(".yourbtn").addClass("show-details");                
          });
     });
  )

});

Then by css

.show-details {
  display: block;
 }

and you can style as you want