0

Есть таблица при нажатии на (Интернет Банкинг или Денежные переводы должны открываться другие ячейки таблицы, из таблицы нужно сделать акордеон на jq, помогите пожалуйста сделать, не могу никак понять как єто сделать )

<table>
  <thead>
    <tr>
      <td>Отдадите</td>
      <td>Получите</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr class="table_title" id="group_one">
      <td colspan="2">Интернет-банкинг</td>
    </tr>
    <tr>
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr>
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr>
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr>
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr>
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="table_title" id="group_two">
      <td colspan="2">Денежные переводы</td>
    </tr>
    <tr>
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr>
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr>
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr>
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr>
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="table_title" id="group_three">
      <td colspan="2">Наличные деньги</td>
    </tr>
    <tr>
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr>
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr>
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr>
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr>
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
  </tbody>
</table>

Есть таблица при нажатии на Интернет Банкинг или Денежные

Переводы должны открываться другие ячейки таблицы, из таблицы нужно сделать аккордеон на jq, помогите пожалуйста сделать, не могу никак понять как это сделать

1
  • Покажи, как именно пытался реализовать, и что именно не получается?
    – Air
    18 ноя 2018 в 19:29

1 ответ 1

0

Например так (на скорую руку, не оптимально)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <td>Отдадите</td>
      <td>Получите</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr>
      <td><a href="#">WMZ</a></td>
      <td><a href="#">WMZ</a></td>
    </tr>
    <tr class="table_title" id="group_one">
      <td colspan="2">Интернет-банкинг</td>
    </tr>
    <tr class="group group_one">
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="group group_one">
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="group group_one">
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="group group_one">
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="group group_one">
      <td><a href="#">Сбербанк</a></td>
      <td><a href="#">Сбербанк</a></td>
    </tr>
    <tr class="table_title" id="group_two">
      <td colspan="2">Денежные переводы</td>
    </tr>
    <tr class="group group_two">
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="group group_two">
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="group group_two">
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="group group_two">
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="group group_two">
      <td><a href="#">WU USD</a></td>
      <td><a href="#">WU USD</a></td>
    </tr>
    <tr class="table_title" id="group_three">
      <td colspan="2">Наличные деньги</td>
    </tr>
    <tr class="group group_three">
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr class="group group_three">
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr class="group group_three">
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr class="group group_three">
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
    <tr class="group group_three">
      <td><a href="#">Наличные USD</a></td>
      <td><a href="#">Наличные USD</a></td>
    </tr>
  </tbody>
</table>

<style>.group{display:none;} .table_title{background:red;}</style>

<script>

$('.table_title').click(function() {
	$('.group').hide();	
	$('.'+$(this).attr("id")).toggle('slow');
});

</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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