Vous avez besoin de créer un site e-commerce PrestaShop ?

Freelance spécialisée dans la création de site de vente en ligne, je réalise des sites performants et ergonomiques, respectant l'univers de votre marque et l'expérience utilisateur.

CONFIEZ-MOI LA CRÉATION DE VOTRE FUTUR SITE E-COMMERCE

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>

div class="panel-group" id="accordion">

<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a></h4>

</div>

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

<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a></h4>

</div>

</div>

<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Collapsible Group 3</a></h4>

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

<p class="accordion-toggle minus-cercle">Accordion 1</p>

<p>Cras malesuada ultrices augue molestie risus.</p>

</div>

<p class="accordion-toggle">Accordion 1</p>

<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>

</div>

<p class="accordion-toggle">Accordion 3</p>

<p>Vivamus facilisisnibh scelerisque laoreet.</p>

</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;
    });
  });

$(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";
}

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

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

Solution 1 (ne fonctionne pas toujours)

Solution 2

Articles similaires

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

Laisser un commentaire Annuler la réponse

RECHERCHE

About Me

Ils m’ont fait confiance

Articles récents

RESTONS EN CONTACT

Catégories

Échangeons sur votre projet

N’hésitez-pas à me contacter afin de parler de votre projet e-commerce, je prendrais contact avec vous rapidement.