1

Друзья, прошу помощи! Уверен решение простейшее, но я не силен в 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 строка должны быть скрыты, а при клике на ссылку "выезжать". Заранее спасибо!

1 ответ 1

2

реализуется довольно просто при помощи 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>

1
  • Спасибо вам огромное! Вы очень помогли! А можно как-нибудь масштабировать шрифт? Например, когда таких ссылок 5-6 и каждая открывает свои строки. 4 фев 2018 в 16:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.