accordion + hide
 

Помогите разобраться.
На сайте сделал список что то в виде этого
http://anton.shevchuk.name/wp-demo/j...ccordion1.html

теперь мне надо сделать так, что бы каждый элемент можно было удалить,
наподобии этого
http://anton.shevchuk.name/wp-demo/j...-comments.html

Как получилось у меня

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){
		$(this).next("p").slideToggle("slow")
		.siblings("p:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});

<div class="accordion"> 
<h3 class='toggler'>Заголовок 1</div></h3> 
		<p class='not_pad'>Показываемый текст1</p>
<h3 class='toggler'>заголовок2</h3> 
		<p class='not_pad'>Показываемый текст2</p>

аккордион заработал,
теперь пытаюсь сделать удаление элементов,
дописываю код

$(document).ready(function(){

	$(".pane:even").addClass("alt");

	$(".pane .btn-spam").click(function(){
		$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
		.animate({ opacity: "hide" }, "slow")
		return false;
	});

});

в странице:

<div class="accordion"><div class="pane">
<h3 class='toggler'>Заголовок 1</h3>
		<p class='not_pad'>Показываемый текст1 <a href="#" class="btn-spam">Delete</a></p></div>
<div class="pane"><h3 class='toggler'>заголовок2</h3> 
		<p class='not_pad'>Показываемый текст2 <a href="#" class="btn-spam">Delete</a></p></div>

сначала обрадовался, вроде как все заработало, но один косяк, перестал работать акардион, точнее стал неправильно работать: если клацнуть на заголовок h3(неразвернутый), то он развернется, но при этом заголовок h3 который был развернут не сворачивается, если убрать все <div class="pane"></div>, то аккордион работает нормально.

может у кого есть идеи, как это можно реализовать?