Javascript-форум - Показать/скрыть блок

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Показать/скрыть блок (https://javascript.ru/forum/jquery/11957-pokazat-skryt-blok.html)

Показать/скрыть блок

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapsible Message Panels</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

<style type="text/css">
.next {
display:block;
position: relative;

}
.panel {
position:absolute;
z-index:2;
display: none;
}
.bloc
{
width:50%;
z-index:1;
}
.active {
display:block;
height:20px;
border-top:1px solid #93cce9;
font-size:12px;
color:#c8e9f9;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".next").click(function () {
$(this).next(".panel").slideToggle("slow")
$(this).toggleClass("active")
return false;
});
});
</script>

</head>
<body>

<div class="bloc">
<h1>Блок</h1>
<span> Блок</span>
<span class="next">
<a href="#">Показать</a>
<a href="#" >Скрыть</a>
</span>

<div class="panel">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. </p>

</div>
</div>
<div class="bloc">
<h1>Блок 1</h1>
<span> Блок 1</span>
<span class="next">
<a href="#" >Показать</a>
<a href="#" >Скрыть</a>
</span>
<div class="panel">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. </p>
</div>
</div>

</body>
</html>

Проблема заключается в том, что надо менять слова Показать (когда блок panel скрыт) и при разворачивании блока показать слово Свернуть. Для одного блока это не проблема, прописав $("a").toggle(), но ведь на странице есть еще ссылки - и они рушатся. Надо через наследование менять слова только для того блока, где идет разворачивание panel. Подскажите как это прописать правильно???

Разметка:

<div class='blockheader'>
	<a href='javascript://' class='toggler'>
		Скрыть
	</a>
</div>
<div class='blockcontent'>
	Содержимое…
</div>

jQuery:

$( "a.toggler" ).click(function () {
	var block = $( this ).parent().next();
	block.slideToggle();
	this.innerHTML = [ "Скрыть", "Показать" ][ +block.is( ":hidden" ) ];
});

Да, блоки раскрываются, но текст так и остается CКРЫТЬ. Где то я еще допустила ошибку?

Как только что выяснилось, slideToggle оставляет элементу высоту 1px и проверка на видимость элемента всегда равна true.

Можно записывать клик в свойство элемента и по нему проверять:

$( "a.toggler" ).click(function () {
	this.clicked = !this.clicked;
	$( this ).parent().next().slideToggle();
	this.innerHTML = [ "Скрыть", "Показать" ][ +this.clicked ];
});

Спасибо Вам огромное, все заработало ) буду знать)))

И следующая задача тут же нарисовалась... Необходимо перед открытием панели проверить закрыты ли другие панели, и если они открыты, свернуть их все, и только потом развернуть нужную.

Можно сначала закрывать все панели, а потом открывать нужную. Тогда ничего не надо будет проверять.

Мда, панели то я скрываю, все бы хорошо...но...ссылки Показать/свернуть тогда некорректно работают, к ним тоже надо обработку поставить???

Можно кликать по самим ссылкам.

у меня несколько блоков на странице, я могу использовать только классы;
вопрос - как сделать так, что бы открывался один? (что ниже порядком)

/код сейчас/

$(document).ready(function(){
    $(".subOpen").click(function () {
      $("div.sub").toggle(); 
    });
});