Добрый день.
Имеется таблица каких-то событий -
Ссылка
При нажатии на кнопку "Правила" появляются правила связанные с определенным событием -
Ссылка.
При нажатии на кнопку, таблица с правилами должна выезжать снизу события.
Когда нажимаешь на кнопку "Правила" другого события, уже открытые должны свернуться и исчезнуть, и только после этого должна вылезти другая таблица с правилами.
Собственно в этом и вопрос, как это сделать.
У меня не получается сделать анимацию выезжания, сделал пока-что просто опасити, но как сделать анимацию убирания уже открытых таблиц, а потом добавления нового я не знаю.
Вот мой код.
Пробовал делать по разному, не получается
$('button.tableGetRules').click(function () {
var $btn = $(this);
var id = $btn.data('id');
$.post('tableEvents/getRules/', {
event_id: id
},
function (data) {
if (data['errors']) {
alert(data['errors']['event_id']);
return;
}
$(".rulesForEvents").hide("slow", function () {
$('.rulesForEvents').remove();
});
$('.colored').css({'background-color': ''});
$btn.parent().parent().addClass('colored').css({'background-color': '#FFFACD'});
$btn.parent().parent().after(
"<tr class='rulesForEvents' style='opacity: 0;'><td colspan='4' style='background-color: #FFFACD; '><div class='test' style='margin-left: 35px; '>" + data + "</div></td></tr>"
);
$(".rulesForEvents").animate({'opacity': '1'}, 1000);
}
);
});
