Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 13/03/2014 14:59:26

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Automatiser les replis de section dans un texte (Auto-Collapse H2)

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)

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 :

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

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

<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

        <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

h1
h2
p
p
p
div
p
h2
p
p

Qui se transforme en

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

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é !


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

Hors ligne

 

Pied de page des forums

  Flux Rss Twitter FaceBook