На странице находятся несколько таблиц, над каждой из которых находится такая кнопка:
<ul id="icons" style="margin-top: -5px;">
<li class="ui-state-default ui-corner-all" title="Reload">
<span id="do_wrap_steps_table" class="ui-icon ui-icon-arrow-1-n"></span>
</li>
</ul>
Код, сворачивающий блок с ID "steps_table_wrapper":
$('#do_wrap_steps_table').click(function(event) {
$('#steps_table_wrapper').slideToggle('slow', function() {
var srcClass = $('#do_wrap_steps_table').attr('class');
if(srcClass == 'ui-icon ui-icon-arrow-1-n') {
$('#do_wrap_steps_table').attr('class', 'ui-icon ui-icon-arrow-1-s');
} else {
$('#do_wrap_steps_table').attr('class', 'ui-icon ui-icon-arrow-1-n');
}
});
});
Поскольку я обращаюсь к каждому блоку "steps_table_wrapper" по ID, реагируя на нажатие кнопок, ID которых пока тоже одинаковы сворачивается только первый из них. Чтобы сворачивать всегда только нужный блок, предполагается такое решение: пронумеровать кнопки и блоки, изменив код JS таким образом, чтобы реакция осуществлялась при нажатии на любом объекте класса "кнопка" и, беря ID кнопки, выделяя ее номер, и выбирая ID блока "steps_table_wrapper" по нему.
Однако, решение кажется мне совершенно не изящным... Есть ли более правильные варианты?
