Jump to content

[Résolu] Afficher / Masquer un texte


Recommended Posts

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 by Neith17 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

  • 4 years later...
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More