Tout d’abord, il fait appel à la librairie Jquery dont nombre de développeurs raffolent, en l’occurence parce qu’il est inutile de réinventer la roue.
Dans le header (ou dans le footer pour wp), ajouter cette ligne :
<script type="text/javascript" src="http://domaine.com/jquery-1.3.2.js"></script>
<script>
//script pour accordéon
$(document).ready(function() {$('#ssmenu ul').hide();
//$('#ssmenu ul:first').show();
$('#ssmenu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#ssmenu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);});
</script>
Voilà pour le footer.
Pour la page php, et comme on peut le découvrir à la premiere page de deezignext, c’est l’ensemble des liens.
Aussi, c’est la page link qui a été modifiée comme suit :
<ul id="ssmenu">
<?php wp_list_bookmarks('title_before=<li style="color: #777777;
font-family: Georgia,Serif,Tahoma,Verdana;
font-size:20px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;">
<a href="#">&title_after=</a>&category_before=&category_after=&before=<li style="list-style-type:none;">&between= : &show_description=1&use_desc_for_title=0'); ?>
</ul>
Et voilà.
La démo est en première page.
En dehors de wordpress, voici également des sources qui peuvent être utiles pour réaliser la même chose, trouvées ici [01-08-2011] et téléchargeable également ici.
Voici une autre page où des jquery accordeons sont répertoriés [05-12-2011]