Notes

jQuery slide sur l’intro des articles avec SPIP

L’intro des articles apparaît avec un slide quand on clique sur le titre

Tags : , ,

Voici un petit script jQuery permettant de faire apparaître avec un "slide" l’intro d’un article en cliquant sur le titre de celui-ci. le tout dans une liste générée par SPIP.

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...

P.-S.

Quelques petits tutoriaux bien pratiques sur jQuery : http://www.webdesignerwall.com/tuto...

© 2017 - Abel Poucet web design