Спойлер в таблице

326

06 февраля 2018, 07:28

Друзья, прошу помощи! Уверен решение простейшее, но я не силен в js и jquery. В общем необходимо, чтобы по клику по тексту в определенной ячейке, под ней выезжало 2-5 строк таблицы.

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

Вот пример. Сначала 2 и 3 строка должны быть скрыты, а при клике на ссылку "выезжать". Заранее спасибо!

Answer 1

реализуется довольно просто при помощи jquery $(elem).toggle()

.toggle() переключает свойство display: none; на display: block; и наоборот

Пример на codepen

$('.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>