Le code javascript
Les éléments portant la class .slide_button seront des boutons qui au click feront apparaître (et disparaître) l’élément suivant avec un effet slide.
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('.slide_button').css('cursor','pointer').click(function(){
$(this).next().slideToggle('slow');
});
});
// ]]>
</script>Les boucles SPIP
La boucle suivante présente tout les articles de la rubrique. Si on clique sur le titre d’un article, on a l’intro de l’article qui apparaît avec un effet slide.
Important : glisser un display : none dans les styles de l’élément à camoufler. (bien sûr, c’est mieux si c’est dans une feuille de style externe)
Important : Il ne faut pas oublier de replacer le contenu de la div "invisible" dans une balise "noscript" pour que les navigateurs ayant javascript désactivé puissent avoir accès à son contenu.
<BOUCLE_articles(ARTICLES) {id_rubrique}>
<h3 class="slide_button">#TITRE</h3>
<div style="display: none;">#INTRODUCTION<br />
<a href="#URL_ARTICLE">Accéder à l'article</a></div>
<noscript>
<div>#INTRODUCTION<br />
<a href="#URL_ARTICLE">Accéder à l'article</a></div>
</noscript>
</BOUCLE_articles>Exemple
Voir un exemple en ligne sur le site de La Vie des Idées, le système est utilisé ici pour les sites syndiqués mais le principe est le même (cliquez sur [Voir les derniers articles] ) :
http://www.laviedesidees.fr/spip.ph...
© Abel Poucet Webdesign - Motorisé par