Volevo fare in modo che cliccando sopra un elemento h3 venisse mostrato un elemento div nascosto e nel caso venisse cliccato su un altro elemento h3 il div già aperto si chiudesse e si aprisse quello corrispondente all'h3 cliccato.
Ho buttato giù due righe in jQuery ma non ottengo l'effetto sperato: i div rimangono aperti tutti!
Dove sbaglio?

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Show/hide</title>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $("div.msg_body").hide();
  //toggle the componenet with class msg_body
  $("h3.msg_head").click(function()
  {
    $(this).next("div.msg_body").slideToggle(300).siblings("div.msg_body").slideUp("slow");
  });
});

</script>
  </head>
  <body>
<ul class="lista-verticale">[*]<h3 class="msg_head">Studio del mercato</h3>
<div class="msg_body">conoscenza del settore...</div>
[*]<h3 class="msg_head">Sondaggio</h3>
<div class="msg_body">scoprire l’effettiva situazione di mercato...</div>
[*]<h3 class="msg_head">Analisi dei dati</h3>
<div class="msg_body">Analizzare i dati del sondaggio...</div>
[*]<h3 class="msg_head">Strategia di Marketing</h3>
<div class="msg_body">Individuare un piano...</div>
[*]<h3 class="msg_head">Creativit&agrave; e comunicazione</h3>
<div class="msg_body">Ideare una comunicazione creativa...</div>
[/list]
  </body>
</html>