Du libre et du sport

Gni ?
Regardez sur le côté :-) J'ai ajouté un petit effet visuel pour l'affichage de la zone bandeau extra (#blogextra dans le squelette) : ça coulisse entre les widgets.

Et ce n'était vraiment pas compliqué à mettre en place vu qu'une documentation de qualité existe.

En jQuery, on met simplement en place le bazard avec :

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			$("#blogextra ul:visible").slideUp("slow");
			$(this).next().slideDown("slow");
			return false;
		});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});

Petites explications de code

1. au chargement de la page
2. caches moi (.hide) toutes les zones <ul> de la div #blogextra (#blogextra ul) sauf la première (:not(:first))
3. ajoutes moi une propriété "click" sur les titres <h2> de la div #blogextra
4. quand je clique sur un titre <h2>, caches moi avec un effet lent 'slideUp' (slideUp("slow")) la zone <ul> de la div #blogextra qui était visible (#blogextra ul:visible)
5. et aussi déroules moi lentement (.slideDown("slow")) la zone <ul> qui suit le titre <h2> cliqué.
6. le return false stoppe la propagation et annule l’action en cours. (plus d'infos)

Les trois dernières lignes nous permettent de changer l'aspect du curseur de la souris au survol des titres <h2> de la div #blogextra : tout devient intuitif ;-)