вопрос
Подскажите каким образом реализовать следующее:
Есть например 4 абзаца каждый из которых заключен в тег <li>. Мне нужно чтобы по нажатию например на ссылку либо кнопку отображался только один абзац заключенный в <li>.
Вот наглядный пример.
До нажатия "Скрыть":
После нажатия скрыть:
Есть например 4 абзаца каждый из которых заключен в тег <li>. Мне нужно чтобы по нажатию например на ссылку либо кнопку отображался только один абзац заключенный в <li>.
Вот наглядный пример.
До нажатия "Скрыть":
<li>Первый абзац</li>
<li>Второй абзац</li>
<li>Третий абзац</li>
<li>Четвертый абзац</li>
<a>Скрыть</a>
После нажатия скрыть:
<li>Первый абзац</li>
<a>Развернуть</a>
<!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" xml:lang="en" lang="en">
<head>
<title>123</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
targetLi = $(".class").not(":first");
$(".link").click(function(){
if($(this).hasClass("show")) {
$(this).removeClass("show");
targetLi.fadeOut(200);
} else {
$(this).addClass("show");
targetLi.fadeIn(400);
}
});
});
</script>
</head>
<body>
<ul>
<li class="class">1111</li>
<li class="class">1222</li>
<li class="class">333</li>
<li class="class">4444</li>
<li class="class">5555</li>
</ul>
<a href="#" class="link show">показать/скрыть</a>
</body>
</html>
