<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

$(document).ready(function() {
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('h4').click(function() { // si on clique sur un titre (ici tous les éléments contenu en les balises h4)
    $(this).next('div:hidden').slideDown() // on deroule le div caché qui suit directement le titre
    .siblings('div:visible').slideUp(); // et on cache les div similaires qui etait visible
  });
});

<h4>Avec du texte</h4>
 
 
<!-- premier titre -->
 
<div class="accordeon"><!-- premier bloc de contenu, associé au premier titre -->
	Amiens est une ville française du nord de la France située sur la Somme.
        Administrativement, cette commune est la préfecture de la région de
        Picardie ainsi que du département de la Somme et chef-lieu de canton.
</div>
 
 
<h4>Avec une photo</h4>
 
 
<!-- deuxieme titre -->
 
<div class="accordeon"><!-- deuxieme bloc de contenu -->
	<img src="3.jpg" alt="Metz" width="300" height="225" />
</div>
 
 
<h4>Avec une liste</h4>
 
 
<!-- troisieme titre -->
 
<div class="accordeon"><!-- troisieme bloc de contenu -->
 
<ul>
 
	<li>C'est fou ce qu'on peut mettre dans un menu accordéon !</li>
 
 
	<li><a href="http://blog.arnaud-k.fr">Mon blog</a></li>
 
 
	<li><a href="http://arnaud-k.fr">Mon site</a></li>
 
</ul>
 
</div>