Accordion JQuery

Un plugin qui permet d’activer la librairie Jquery accordion https://jqueryui.com/accordion/ et de l’utiliser directement dans votre contenu rédactionnel ou même ailleurs comme dans un menu.

Obtenez des paragraphes repliables en accordéon avec le raccourci <accordeon> et les {{{intertitres}}} SPIP.

1. Prérequis et activation du plugin

-  Ce plugin fonctionne à partir d’un version de SPIP 3.1 pour raisons de compatibilité de version JQuery préchargée.
-  Activez ce plugin comme tous les plugins SPIP dans l’interface privé.
-  Il n’y a aucune dépendance, la librairie JQuery et JQueryUI étant préinstallées dans SPIP.

2. Rédigez votre texte

Dans le texte d’un article en rédaction, encadrer les intertitres et leurs paragraphes de la balise <accordeon> comme ceci

<accordeon>
{{{Titre du premier accordéon}}}
Voici le contenu du premier accordéon.
{{{Titre du deuxième accordéon}}}
Voilà le contenu du deuxième accordéon.
{{{Titre du troisième accordéon}}}
<div>
Et le contenu du troisième accordéon avec des paragraphes et/ou des images.
</div>
</accordeon>

Le rendu de l’accordeon

En dehors d’un contenu SPIP, dans une FAQ par exemple

Respecter l’écriture suivante pour ouvrir les blocs qui suivent chaque titre h3 cliquable

<div class="spip_accordeon">
    <h3>Titre du premier accordéon</h3>
    Voici le contenu du premier accordéon.
    <h3>Titre du deuxième accordéon</h3>
    Voilà le contenu du deuxième accordéon. etc
</div>

Comprendre le plugin

Merci à Arno* qui m’a mis sur la voie du Yaml très simple de TextWheel pour traiter le raccourci <accordeon> qui génére un
<div class="spip_accordeon"> pris en compte par le javascript.
http://zone.spip.org/trac/spip-zone/browser/_plugins_/accordion/wheels/accordeon.yaml?rev=95047

Le plugin utilise également le pipeline de chargement des effets UI de JQuery « jqueryui_plugins » très simple d’usage une fois déclaré dans le paquet.xml

function accordion_jqueryui_plugins($plugins){
        $plugins[] = "jquery.ui.accordion";
        return $plugins;
}

Pour aller plus loin

Les options de la librairie JQuery UI Accordion sont sur https://jqueryui.com/accordion/

On peut utiliser accordion JQuery où l’on veut, dans son propre dossier de squelettes, il suffit de dupliquer javascript/spip_accordion.js et de réécrire les options du fichier js.

Todo

Modifier le yaml pour qu’il n’y ait plus à ajouter à la main un div juste après un intertitre si l’on souhaite paragrapher ou insérer des images dans les soufflets de l’accordéon.

Discussion

Une discussion

  • 3

    Bonjour,

    En changeant la borne en compatibilite=« [2.0.0 ;3.2.*] » dans le fichier paquet.xml le plugin fonctionne avec SPIP 3.2

    Et sinon le fait d’avoir une seule entrée h3 dépliée à la fois fonctionne dans le texte d’un article mais je n’arrive pas à l’implémenter lorsque les h3 sont dans un squelette.

    Merci

    • J’ai modifié sur la zone pour la compatibilité. Pour l’autre problème, je laisse touti répondre.

    • Bonjour,
      merci de vos messages.

      DD, normalement ça devrait marcher, vérifie la fermeture du div englobant et compare le code source avec celui qui fonctionne, au pire, reporte ici ce qu’affiche la console JS

      ++

    • Hello Touti,
      J’ai réussi. en fait il faut aussi ajouter des <div> </div> dans les squelettes lorsqu’il y a des paragraphes
      exemple :

      [<div><p class="#EDIT{url_site} hyperlien"><a href="#URL_SITE" class="spip_out">(#URL_SITE|couper{80})</a></p></div>]

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 29 janvier 2018