<!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. Подскажите как это прописать правильно???