Dans mes débuts avec la bibliothèque JQuery voici les premiers résultats avec le menu du blog, à côté de chaque partie il y a un moins (ou un plus) qui permet de développer (ou diminuer) le sous-menu. Voici le code, je ne sais pas si on peut l’améliorer mais c’est sûrement le cas vu les ralentissements générés sous ie (inexistants sous safari).

Afficher le code source

$(document).ready(function()
{
//on ajoute le + et le - qui permettront de masquer les données pour chaque titre H2

$("#sidebar").find("h2").each(function(i)
{
$(this).html("CODE HTML IMAGES"+ $(this).html());
});

$("img[@src*=images/puce_plus.gif]").hide("fast"); // on masque le +

$("img[@src*=images/puce_moins.gif]").click(function() //quand on clic sur le moins
{

$(this).hide("fast"); //on masque le -
$(this).parents("h2").find("img[@src*=images/puce_plus.gif]").show("fast");
//on affiche le +

//on cache les p, ul, h3 et autres éléments du menu

$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("p").slideUp("slow");
$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("ul").slideUp("slow");
$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("h3").slideUp("slow");

//pour des raisons esthétiques je modifie le border du h2

$(this).parents("h2").css("border-width","1px 0 0px 1px");

//pour le bas du menu je remet le border normalement

$("#referents").find("h2").css("border-width","1px 0 1px 1px");

  });

$("img[@src*=images/puce_plus.gif]").click(function() //quand on clic sur le +
{
$(this).hide("fast"); //on masque le +

$(this).parents("h2").find("img[@src*=images/puce_moins.gif]").show("fast");
//on affiche le -

//on affiche se qui vient d'être masqué

$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("p").slideDown("slow");
$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("ul").slideDown("slow");
$(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("h3").slideDown("slow");
//on remet le border normalement

$(this).parents("h2").css("border-width","1px 0 1px 1px");

  });

}); Affichage des images :
[img src="images/puce_moins.gif"] [img src="images/puce_plus.gif"]