Появление и исчезновение элемента на странице.
 

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

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

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




			}
		);

	});

mastanggt, попробуй так:

<style>
tr.active{background:#FFFACD}
div.rulesForEvents{display:none;margin-left:35px;}
</style>

<script>
$('button.tableGetRules').click({x:0},function(e){
	if (e.data.x != this) {
		if (e.data.x) {
			$(e.data.x)
				.closest('tr')
				.removeClass('active')
				.next()
				.find('.rulesForEvents')
				.slideUp(500,function(){
					$(this).closest('tr').remove();
				});
		}
		var $btn = $(this);
		var $act = $btn.closest('tr').addClass('active');
		$.post(
			'tableEvents/getRules/',
			{ event_id: $btn.data('id') },
			function(data){
				if (data['errors']) {
					alert(data['errors']['event_id']);
					return;
				}
				$act.after('<tr class="active"><td colspan="4"><div class="rulesForEvents">'+data+'</div></td></tr>')
					.next()
					.find('.rulesForEvents')
					.slideDown(500);
			});
		e.data.x = this;
	}
});
</script>

Круто, работает, только не понятно откуда берется e, ведь мы при клике ничего не передаем в функцию.
И не работает background-color на tr почемуто

почитай про события в js
хз в моем примере всё работает