[Gamaliaka]

Добрый вечер. Есть скрипт:

<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