Friends, I ask for help! I'm sure the solution is the simplest, but I'm not strong in js and jquery. In general, it is necessary that by clicking on the text in a particular cell, 2-5 lines of the table would leave under it.

<table class="tariffs-table"> <col width="790"> <col width="270"> <col width="270"> <col width="270"> <tbody> <tr> <td><a href="#">По клику сюда открывались две следующие строки</a></td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> <tr> <td> Сейчас должны быть скрыты </td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> <tr> <td> Сейчас должны быть скрыты </td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> </tbody> </table>

Here is an example. First, the 2nd and 3rd line should be hidden, and when you click on the link "go". Thank you in advance!

    1 answer 1

    implemented fairly simply with jquery $ (elem) .toggle ()

    .toggle () toggles the display property: none; on display: block; and vice versa

    Codepen example

     $('.button-spoiler').on('click', function() { $('.item-spoiler').toggle("slow"); }); 
     .item-spoiler { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="tariffs-table"> <col width="790"> <col width="270"> <col width="270"> <col width="270"> <tbody> <tr> <td><a href="#" class="button-spoiler">По клику сюда открывались две следующие строки</a></td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> <tr class="item-spoiler"> <td> Сейчас должны быть скрыты </td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> <tr class="item-spoiler"> <td> Сейчас должны быть скрыты </td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> </tbody> </table>

    • Thanks a lot! You really helped! Can I somehow scale the font? For example, when there are 5-6 such links and each opens its own lines. - Ilya Hikstimerg