Смена текста в ссылке

[krol]

Нашел скрипт выдвижной панели

$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#cartbody").slideToggle("slow");
		$(this).toggleClass("active");
		  return false; 	
	});
	 
});

<div class="slide">
<a href="#" class="btn-slide">Показать</a>
</div>

в ней все устраивает кроме одного не меняется там текст показать/скрыть.
Побывал сделать так:

$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#cartbody").slideToggle("slow");
		$(this).toggleClass("active");
		$(this).html("Скрыть");
		  return false; 	
	});
	 
});

Текст Скрыть проявляется, но потом не убирается
как узнать когда панель скрыта, а когда нет? и менять в ссылке текст

[Amphiluke]

Вот один из возможных вариантов (далеко не единственный возможный):

<style type="text/css">
	.hidden { display:none; }
</style>

$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("span", this).toggleClass("hidden");
		$("#cartbody").slideToggle("slow");
		$(this).toggleClass("active");
		  return false; 	
	});
});

<a href="#" class="btn-slide"><span>Скрыть</span><span class="hidden">Показать</span></a>

[krol]

Спасибо, работает но хотелось бы обойтись без SPANов

[Amphiluke]

Ну есть же и другие варианты. Например,

$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("#cartbody").slideToggle("slow", function() {
			$(".btn-slide").text(($("#cartbody:visible").length==0) ? "Показать" : "Скрыть");
		});
		$(this).toggleClass("active");
		  return false; 	
	});
});

---

Или так:

$(document).ready(function(){
	$(".btn-slide").click(function(){
		$(this).text(($("#cartbody:visible").length==0) ? "Скрыть" : "Показать");
		$("#cartbody").slideToggle("slow");
		$(this).toggleClass("active");
		  return false; 	
	});
});

[krol]

Еще раз спасибо!