Добрый вечер. Есть скрипт:
<script type="text/javascript">
$(document).ready(function(){
$(".body:gt(0)").hide();
$(".title").click(function(){
$(this).next(".body").slideToggle(1)
return false;
});
});
</script>
и HTML:
<ul>
<li>
<div class="title">
<a class="title-a" href="#">Заголовок1</a>
<span>11.11.2012 |</span><a href="#">Раздел: Новости чего-то</a>
</div>
<div class="body">Текст новости1</div>
</li>
<li>
<div class="title">
<a class="title-a" href="#">Заголовок2</a>
<span>05.11.2012 |</span><a href="#">Раздел: Архив</a>
</div>
<div class="body">Текст новости2</div>
</li>
<li>
<div class="title">
<a class="title-a" href="#">Заголовок3</a>
<span>03.11.2012 |</span><a href="#">Раздел: Новенькое</a>
</div>
<div class="body">Текст новости3</div>
</li>
</ul>
В таком виде работает, но не так как надо.
Заменяю в скрипте title на title-a:
<script type="text/javascript">
$(document).ready(function(){
$(".body:gt(0)").hide();
$(".title-a").click(function(){
$(this).next(".body").slideToggle(1)
return false;
});
});
</script>
И больше не работает.
Нужно, чтобы текст новости скрывался и показывался при клике по заголовку новости, а не всему div'у (в первом варианте именно по диву скрывает/показывает). Подскажите как быть? Целый день копался, ничего не получается. Хочется, чтобы новости работали как на сайте w3.org