Menu en accordéon

Nous avons réalisé une FAQ en accordéon afin d'alléger la pagination.
Cette solution nous a été apportée par Vekia, un forumer assidu de Prestashop à suivre absolument. Le topic concernant le menu accordéon est consultable ici : https://www.prestashop.com/forums/topic/297319-faq-cms-block/.

 

Vous aurez 3 fichiers à modifier :

  • le global.css (thème/votre-thème/css/global.css)
  • le header.tpl (thème/votre-thème/header.tpl)
  • la page cms concerné (dans le backoffice de prestashop préférence/cms/votre page de cms)

Allez, c'est parti !


Dans le global.css rajouter à la fin :

/*menu en accordeon*/

#accordion-container {
    font-size: 13px;
    background: #ffffff;
    padding: 5px 10px 10px 10px;
    border: 1px solid #cccccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 5px 15px #cccccc;
    -webkit-box-shadow: 0 5px 15px #cccccc;
    box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
    font-size: 16px;
    background: #ebebeb;
    margin: 5px 0 0 0;
    padding: 5px 20px;
    border: 1px solid #cccccc;
    cursor: pointer;
    color: #666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.active-header {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px;
    background: #F7F7F7;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.active-header:hover {
    background: #F7F7F7;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header {
    background: #ebebeb;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header:hover {
    background:#f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
}

 .accordion-content{
    display: none;
    padding: 20px;
    background: #ffffff;
    border-top: 0;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.open-content{
    width: auto;
    display: block;
    padding: 20px;
    background: #ffffff;
    border-top: 0;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

Dans le header.tpl, avant la balise </header>, insérez :

<!--Menu Accordeon merci Vekia-->
{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});


return false;
});</script>
{/literal}

Pour info : les balises {literal} {/literal} permettent d'insérer du script que prestashop n'aime pas trop gérer lui-même.


Et pour finir, le petit texte que vous voulez afficher sous forme d'accordeon.

Tout d'abord, cliquez sur l'icone </> en haut à gauche de votre éditeur WYSIWYG afin d'écrire directement en code source.

Ensuite écrivez sous cette forme :

<div id="accordion-container">
<h2 class="accordion-header" style="text-align: justify;">le titre qui apparaitra</h2>
<div class="accordion-content">
<p style="text-align: justify;">le texte qui s'affichera après un click sur le titre</p>
</div><h2 class="accordion-header" style="text-align: justify;">le titre qui apparaitra</h2>
<div class="accordion-content"> <p style="text-align: justify;">le texte qui s'affichera après un click sur le titre</p>
<h2 class="accordion-header" style="text-align: justify;">le titre qui apparaitra</h2>
<div class="accordion-content"> <p style="text-align: justify;">le texte qui s'affichera après un click sur le titre</p>
</div>
</div>

Et voilà. C'est fini.

Vous pouvez voir le résultat sur notre site https://librairiedalmyre.com/content/10-questions-frequentes