Ajouter un accordéon dans une page cms | Astuce Prestashop 1.6

Grâce à ce tuto très simple, vous pourrez ajouter un accordéon dans votre page CMS

Astuce Prestashop 1.6

————————————————-

Solution 1 (ne fonctionne pas toujours)

1) Une fois sur la page cms, cliquez sur l’icône source code

Ajouter des tabs dans une page cms | Astuce Prestashop

2. Insérez le code suivant

div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Collapsible Group 3</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>

3 Enregistrer et visualiser

Ajouter un accordéon dans une page cms | Astuce Prestashop

Solution 2

1) Une fois sur la page cms, cliquez sur l’icône source code

Capture d’écran 2016-04-05 à 14.02.35

2. Insérez le code suivant

<div id="accordion">
<p class="accordion-toggle minus-cercle">Accordion 1</p>
<div class="accordion-content default">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<p class="accordion-toggle">Accordion 1</p>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<p class="accordion-toggle">Accordion 3</p>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

3) Ajouter le code suivant  dans ../themes/lenomdevotretheme/js/global.js. Au début ou à la fin peu importe :

   $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle();
		//Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp();
	  $(this).toggleClass('minus-cercle').siblings().removeClass("minus-cercle");;
return false;
    });
  });

4) Ajouter le code suivant  dans ../themes/lenomdevotretheme/css/cms.css

.accordion-content {
	display: none;
	padding: 10px 20px;
	font-size: 14px
}
.accordion-content.default {
	display: block;
}
.accordion-toggle {
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	color: #343738;
	cursor: pointer;
	font-size: 15px;
	padding: 10px 15px;
}
.accordion-toggle:before {
	font-family: "FontAwesome";
	font-size: 14px;
	margin-right: 8px;
	content: "\f196";
	display: inline-block;
	vertical-align: top
}
.accordion-toggle.minus-cercle:before {
	content: "\f147";
}

5)  Résultat

Ajouter un accordéon dans une page cms | Astuce Prestashop

Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !

Articles similaires

Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 2553
Il est vous peut-être arrivé de vouloir remettre votre produit en nouveauté Il existe deux solutions dont une donnée par Webbax Dupliquer votre produit Ajouter un champs "date de publication" dans la fiche produit. Comment ajouter un champs "date de publication" dans le back-office de Prestashop ?  A) Ouvrer le fichier « adminthemesdefaulttemplatecontrollersproductsinformat...
Afficher le champ adresse sur plusieurs lignes | Bloc contact infos – Astuce Presta...
views 1076
Cette astuce Prestashop est valable pour la version 1.6 Vous l'avez sûrement remarqué, en bas de page, l'adresse de votre magasin est sur une seule ligne. Ce rapide tutoriel va vous permettre d'afficher le champ adresse sur plusieurs lignes Valable pour Prestashop 1.6 et 1.5 ----------------------------------- 1) Pour insérer les informations de votre boutique, il faut aller...
Les modules installés par défaut sur le front-office de votre boutique | Prestashop 1.7
views 3439
La version Prestashop 1.7 officielle est sortie. La liste des modules installée par défaut sur votre boutique a considérablement diminué puisqu'il y a en plus que 19. Les noms ont aussi été modifiés. Pour les consulter, il faut aller dans le back-office de Prestashop Modules > Modules & Services > Gérer les modules installés Liens pour suivre sur réseaux sociaux Ce module permet...
Configurer les réseaux sociaux sur la page produit | Prestashop 1.6 et 1.7
views 5250
Aujourd'hui, nous allons voir comment configurer les réseaux sociaux sur les pages produits de votre boutique e-commerce sous Prestashop 1.6 et 17 La configuration  est identique sur les deux versions, mais le chemin d'accès est différent. ———————————————————————————————————————— Tutorial pour Prestashop 1.6 Etape 1: Tout d’abord, connectez-vous au back-office de votre site Prestashop ...
Guide complet pour vos campagnes Google Adwords
views 502
Ce guide est en vente sur Amazon.fr et offert en format PDF.  Complet, Intuitif et plein d'astuces. Allez jeter un oeil ! Besoin de gérer des campagnes Google AdWords ? Allez découvrir la formation AdWords proposée par refeo.com, vous trouverez, en plus des précieuses informations livrées, un guide complet qui vous expliquera tous les contours de l'outil Google AdWords, de même que la façon dont...

6 réponses à “Ajouter un accordéon dans une page cms | Astuce Prestashop 1.6”

  1. Adrian dit :

    Hello, et merci pour ces méthodes !
    La première ne fonctionne apparemment pas, par contre la deuxième est parfaite !
    Attention dans le 4) tout à la fin :
    il y a un espace à f147, du coup le symbol ne fonctionne pas.
    Merci à vous 🙂

    }
    .accordion-toggle.minus-cercle:before {
    content: « \f147 « ;
    }

  2. Benjamin dit :

    La solution 2 marche pour moi, merci.
    Juste 1 question: lors d’une mise à jour de Prestashop, le fichier global.js est il remplacé?

  3. c_majory dit :

    Bonjour,

    Non, en cas de mise à jour de prestashop, les fichiers qui se situent à l’intérieur du dossier thèmes ne sont pas impactés.

  4. Caroline dit :

    Merci pour ce tuto simple et efficace. J’ai d’office testé la solution 2 qui marche très bien. Sauf que 🙂 j’ai 2 blocs (editeur de page d’accueil et contentbox) sur la même page et dans lesquels j’ai créé pour chacun un effet toggle. J’avais testé d’abord sur le second bloc. Mais depuis que j’ai mis le code dans le premier, le second ne fonctionne plus. Que faut-il faire pour pouvoir utiliser le script à plusieurs endroits de la page ? Merci d’avance

  5. c_majory dit :

    en changeant les classes

  6. Abdelmoula Nami dit :

    Bonjour
    Merci pour le tuto , cela fonctionne avec 1.7?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *