Implanter un text avec effet OPEN/CLOSE dans le html d'une page cms avec tinymce

[L'Agence Nature]

Bonjour,

 

J'ai prestashop 1.4.7

Je ne veux pas utiliser le module FAQ qui est une page non cms

La fonction don j'ai besoin apparait à l'intérieur d'un cms créé dans la BO

 

Je cherche à faire la chose suivante:

créer une page cms dans mon back office et insérer un code adéquate dans le html de tinymce afin de créer un effet OPEN and CLOSE avec des titres en <h3> et des paragraphes <p>.

 

Dans la démo en ligne de prestashop , pour exemple: http://demo-store.prestashop.com/en/content/3-terms-and-conditions-of-use ,

nous pouvons voir qu'il y a une fonction accordéon au niveau du menu catégorie dans la colonne de gauche. Est-il possible d'utiliser le même procédé pour créer un effet show and hide dans le texte de la page cms, par exemple dans la page termes et conditions-de-utilisation?

 

J'ai découvert dans \themes\prestashop\js\tools le fichier treemanagement.js qui semble avoir tout pour un effet OPEN et CLOSE - Le menu Catégorie utilise cet effet. Y a t il moyen de créer ou de trouver le code à adapter et à insérer dans le html, css et tpl ...

 

Avez vous un code à partager ou des pistes?

Merci

 

Voici ce que j'ai essayé de faire sans succès:

Dans le html de tinymce d'une page cms

 

<ul class="tree dynamized" style="display: block;">
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 1</h3></a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 2 </h3></a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 3</h3> </a>
 <ul style="display: none;">
  <li>
    <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
</ul>

 

Avec un css :

 

#center_column span.CLOSE {
    background-image:url("../img/icon/more.gif");
}
#center_column span.OPEN {
    background-image:url("../img/icon/less.gif");
}
#center_column span.grower {
    background-position:0 3px;
    background-repeat:no-repeat;
    display:block;
    float:left;
    height:15px;
    margin:0 0 0 -12px !important;
    padding:0;
    width:9px;
}

 

 

Merci pour votre aide.

David

[L'Agence Nature]

Voici une première solution qui me plait bien et qui fonctionne:

http://www.prestashop.com/forums/index.php?/topic/95432-adding-an-accordion-to-cms-pages-solution/page__view__findpost__p__784340

 

D'autres solutions peut être?

A bientôt