[mastanggt]

Добрый день.
Имеется таблица каких-то событий - Ссылка
При нажатии на кнопку "Правила" появляются правила связанные с определенным событием - Ссылка.
При нажатии на кнопку, таблица с правилами должна выезжать снизу события.
Когда нажимаешь на кнопку "Правила" другого события, уже открытые должны свернуться и исчезнуть, и только после этого должна вылезти другая таблица с правилами.
Собственно в этом и вопрос, как это сделать.
У меня не получается сделать анимацию выезжания, сделал пока-что просто опасити, но как сделать анимацию убирания уже открытых таблиц, а потом добавления нового я не знаю.

Вот мой код.
Пробовал делать по разному, не получается

$('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);




			}
		);

	});