Здравствуйте друзья. Помогите пожалуйста разобраться. У нас есть скрипт.
<script type="text/javascript">
$('.trigger').click(function() {
$('.st').toggle();
});
</script>
При нажатии на элемент с классом trigger
<input class="trigger">
У tbody
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
Меняется style на
<tbody class="st" style="display: table-row-group;">ТЕКСТ...</tbody>
Проблема заключается в том, что этих tbody много
<input class="trigger">
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
<input class="trigger">
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
<input class="trigger">
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
Допустим при нажатии на первый элемент с классом trigger, мы получаем
<input class="trigger">
<tbody class="st" style="display: table-row-group;">ТЕКСТ...</tbody>
<input class="trigger">
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
<input class="trigger">
<tbody class="st" style="display: none;">ТЕКСТ...</tbody>
То есть меняется style в первом tbody, но если нажать на второй элемент в классом trigger ничего не происходит, пока снова не нажмем на первый элемент, чтобы изменился второй. Как сделать чтобы скрипт работал для каждого элемента с классом trigger и tbody не зависели друг от друга. Нажали на первый элемент получили style="display: table-row-group;", нажали на третий элемент получили style="display: table-row-group;" и так далее.