Forum CMS Made Simple FR
Automatiser les replis de section dans un texte (Auto-Collapse H2) - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Automatiser les replis de section dans un texte (Auto-Collapse H2) (/thread-3139.html)


Automatiser les replis de section dans un texte (Auto-Collapse H2) - bess - 13/03/2014

Salut tout le monde


Petite astuce que je viens de trouver. J'ai un client qui souhaitait pour une seule de ses pages FAQ un effet de replis de texte sur le titre des sections (balise h2)

[Image: 74014220140313122241.png]


Première solution : faire autant de bloc de contenu que de bloc FAQ.... pas top

Seconde solution : le faire en JS et rendre tout automatique.

Etape 1 : aider à identifier les pages qui doivent faire un "collapse" sur le h2 des contenu. J'ai utilisé dans les options avancées de la page FAQ ce code dans Balises Smarty spécifiques pour cette page :

Code :
{assign 'collapse' true}

Etape 2 : dans le gabarit commun à toutes les pages : On identifie clairement le contenu de type collapse d'un type non collapse grace a une classe CSS.

Code :
<div class='content_wrapper {if isset($collapse) && $collapse == true}collapse{/if}'>
  {$content}
</div>


Etape 3 : installez le plugin Jquery collapse + préparez votre propre code JS en pied de gabarit :

Code :
<script>window.jQuery || document.write('<script src="{root_url}/uploads/js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="{root_url}/uploads/js/vendor/collapse/jquery.collapse.js"></script>

et
Code :
<script>            
            $( document ).ready(function() {

              $( ".collapse h2" ).each(function( index ) {
                   $( this ).nextUntil( "h2" ).wrapAll("<div class='blablabla' />");
              });
              $( ".blablabla" ).after("<hr/>");
              $( ".collapse hr:last-child" ).hide();
              $(".collapse").collapse({
                query: 'h2'
              });
            });
            
        </script>

Et nous voici déjà avec un code fonctionnel.

La boucle va itérer autour de chaque balise h2 trouvée dans les pages de contenu de type "collapse" et va effectuer un traitement sur chacun d'entre eux. Le traitement consiste à partir du h2 trouvé et à aller aussi loin que possible avant de retomber sur un autre h2 (ou de sortir de la div de contenu). Pour l'ensemble des éléments sélectionnés entre les deux balises h2, on enrobe le tout par une nouvelle div.

A ce niveau nous avons ce code HTML

Citation :h1
h2
p
p
p
div
p
h2
p
p

Qui se transforme en

Citation :h1
h2
div {p,p,p,div,p }
h2
div {p,p}

La seconde partie du code et la troisième vont ajouter une balise <hr/> et cacher immédiatement la toute dernière ce qui permet d'obtenir cette structure dans le DOM

Citation :h1
h2
div {p,p,p,div,p }
hr
h2
div {p,p}
hr <----- caché


enfin la dernière étape est une facilité car on aurait pu continuer à faire du manuel. Ici on utilise donc un plugin qui va s'occuper de réduire la balise div qui suit chaque balise h2.


Voilà, il vous suffit d'ajouter un peu de CSS et le tour est joué !


[Image: 94506220140313135221.png]


Ce script devrait être amélioré, très certainement. Par exemple pour éviter que des balises H1 supplémentaires dans le texte soient cachées (h1 étant normalement au dessus des h2...) mais il me fait le café, c'est très suffisant pour moi Smile


Et pour tester en live : cliquez ici