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

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

Solution 2

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

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

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