Abel Poucet Webdesign
Accueil du site > tools > jQuery slide sur l’intro des articles avec SPIP
jQuery slide sur l'intro des articles avec SPIP

jQuery slide sur l'intro des articles avec SPIP

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

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

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

Vos réactions

Bibeuwt, [12 novembre 2008]

Quel dommage tout ce spam, excellent site que le tien ! Merci pour l’astuce jquery

Abel, [21 mars 2009]

Merci !

J’ai un peu fait le ménage au niveau des spams, c’est vrai que c’était l’invasion...

Réagir

(Vous pouvez laisser un message en remplissant les champs ci-dessous)


Votre réaction :

Navigation alternative :

Contact

  • 14 bis, bd de l'Hôpital 75005 Paris
  • 06 81 35 98 00

Navigation / syndication

logo abel                        © Abel Poucet Webdesign - Motorisé par SPIP - Webdesign : Abel Poucet