[Résolu] Afficher / Masquer un texte

[Neith17]

Bonjour,

 

Je souhaite qu'une page CMS affiche ou masque un texte quand je clic sur un certain lien. Sur la version 1.5, j'avais utilisé le script suivant dans header.tpl :

<script language="javascript" type="text/javascript">
	function bascule(elem)
	{
		etat=document.getElementById(elem).style.display;
		if(etat=="none"){
			document.getElementById(elem).style.display="block";
		}
		else{
			document.getElementById(elem).style.display="none";
		}
	}
</script>

Puis dans l'éditeur HTML des pages CMS, j'utilisais :

<a onclick="bascule('mon_id'); return false;">Cliquez ici pour afficher le texte</a></span>
<div id="mon_id" style="display: none;"><p>Ouah, mon texte s'est affiché !!</p></div>

Maintenant, je voudrais faire la même chose, mais sur la version 1.6.1.3., quand je modifie mon HTML via l'éditeur, il me le supprime une fois que j'enregistre...

Edited April 18, 2016 by Neith17 (see edit history)

[Mediacom87]

Bonjour,

 

le javascript est refusé.

 

Vous pouvez essayer de faire votre script avec jquery en vous appuyant sur une classe comme sélecteur d’éléments à surveiller lors d'un click

[Neith17]

Bonjour,

 

Merci pour votre réponse, je me tourne effectivement vers le script jquery accordion qui me permettra de faire ce que je souhaite.

 

Je vais essayer de voir de ce côté et reviendrai poster ma solution ici avant de clore le sujet

 

Merci encore.

[Mediacom87]

Prestashop utilisant bootstrap cela peut servir http://getbootstrap.com/javascript/#collapse

[Neith17]

Mais oui !!!!! 

 

Voilà c'est exactement ça !!!!

 

Merci, merci, merci !!!

 

Avec un peu de CSS en plus, je vais pouvoir faire un truc super sympa

[Neith17]

Alors pour ceux que ça peut aider, voici une petite solution en 3 étapes :

 

1.  Commencez par ajouter, dans le fichier global.js situé dans themes/votretheme/js/, les lignes suivantes :
   

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

   Vous pouvez ajouter votre code au début comme à la fin du fichier.

2. Dans la page CMS où vous souhaitez utiliser votre accordéon, écrivez votre code comme suit :
    

   <div id="accordion">
   <p class="accordion-toggle minus-cercle">Mon premier accordéon, ouvert par défaut</p>
   <div class="accordion-content default">
   <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
   </div>
   <p class="accordion-toggle">Mon accodéon numéro 2</p>
   <div class="accordion-content">
   <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
   </div>
   <p class="accordion-toggle">Encore un accordéon</p>
   <div class="accordion-content">
   <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
   </div>
   </div>
   

   Ajouter autant de <div> qu'il le faut.

3. Modifiez cms.css afin de faire votre accordéon comme bon vous semble.

Voilà, merci encore à Mediacom87 pour son aiguillage et bonne journée à vous tous.

[Lyn&Or Bijoux]

Bonjour,

Quelqu'un aurait la solution pour prestashop 1.7. c'est exactement ce que je veut faire sur la description des catégories.

Merci d'avance!

[Mediacom87]

Voici une autre inspiration possible pour faire cela sans javascript https://codepen.io/abergin/pen/ihlDf

[Lyn&Or Bijoux]

Merci, je vais regarder ça.

C'est dommage qu'ils aient retiré cette fonctionnalité, sous PS 1.6, ca le faisait tout seul,

 

[Lynda]

On 10/14/2020 at 9:17 AM, Mediacom87 said:

Voici une autre inspiration possible pour faire cela sans javascript https://codepen.io/abergin/pen/ihlDf

J'ai essayé, ça ne marche pas...