Afficher/cacher un texte toggle mootools

Afficher/cacher un texte toggle mootools - HTML/CSS - Programmation

Marsh Posté le 05-09-2009 à 20:15:58    

Bonjour  
 
Je cherche à afficher un texte qui déroule en cliquant sur un lien. Le script marche très bien; seul soucis: le texte est déjà présent quand on arrive sur la page, et donc quand on cliques sur le lien, il se cache. Je voudrais le contraire: que le texte soit caché et qu'il apparaisse quand on cliques sur le lien..
Voici le script:  
 
JAVASCRIPT
 

Citation :

function effect(Id,state,effect)
  {
  window.addEvent('domready', function() {
  var status = {
                  'true': 'Afficher',
    'false': 'Cacher'
        };
     
  switch(effect)
  {
  case "toggle-h":
  Slide = new Fx.Slide(Id, {mode: 'horizontal'}).toggle();
  break;
  case "in":
  Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideIn();
  break;
  case "out":
  Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideOut();
  break;
  case "toggle-v":
  Slide=new Fx.Slide(Id).toggle();
  break;
  case "hide":
  Slide=new Fx.Slide(Id).hide();
  break;
  case "show":
  Slide=new Fx.Slide(Id).show();
  break;
  }  
  Slide.addEvent('complete', function() {
  $(state).set('html', status[Slide.open]);
  });
  });
  }


 
TEXTE HTML
 

Citation :

<head>
 <script type="text/javascript" src="js/mootools.js"></script>
 <script type="text/javascript" src="js/essai.js"></script>
 <title></title>
</head>
<body>
 <div >
  <a id="etatmenu" href="#" onclick="effect('texte','state','toggle-v');">Afficher la suite</A>  
 </div>
 
 <div id="state"></div>
 <div id="texte">
  <p>texte a afficher</P>
  </div>  
</body>
</html>


 
 
Des pistes ?
 
Merci

Reply

Marsh Posté le 05-09-2009 à 20:15:58   

Reply

Marsh Posté le 05-09-2009 à 21:51:37    

Remplace tout ton JS par ça :
 

Code :
  1. window.addEvent('domready', function(){
  2.     $('etatmenu').addEvent('click', function(){
  3.         this.slide('toggle');
  4.     }).slide('hide');
  5. });


 
Et ton lien :

Code :
  1. <a id="etatmenu" href="#" onclick="return false;">Afficher la suite</A>


 
J'ai pas testé, donc préviens si ça marche ou pas :o


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2009 à 16:06:00    

Arg! Non ca marche pas! Le texte "Afficher la suite" apparait puis disparait on ne peut donc pas cliquer dessus !

Message cité 1 fois
Reply

Marsh Posté le 06-09-2009 à 16:08:58    

zazounn a écrit :

Arg! Non ca marche pas! Le texte "Afficher la suite" apparait puis disparait on ne peut donc pas cliquer dessus !


 
Erf oui j'ai dis une connerie, fatigue toussa :o
 

Code :
  1. window.addEvent('domready', function(){
  2.     $('text').slide('hide');
  3.     $('etatmenu').addEvent('click', function(){
  4.         $('text').slide('toggle');
  5.     });
  6. });


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2009 à 16:13:40    

Euh... la en fait il y a "afficher la suite" et "texte a afficher" qui apparaissent directe. Et plus d'effet ! Quand on clique sur "afficher la suite" ca en fait strictement rien !

Reply

Marsh Posté le 06-09-2009 à 16:17:35    

Hey hey hey !  
 
J'avais juste fait une petite erreur donc là ça marche comme je voulais !  
j'avais un "e" de trop à "text" dans mon code HTML.
 
Merci beaucoup pour l'aide GENIAL !!

Reply

Marsh Posté le 06-09-2009 à 16:25:42    

Rho ptin, maintenant c'est l'habitude de l'anglais [:prozac]

 

c'est $('texte') (2fois) et non $('text') comme je l'ai écris.

 

Par contre ça risque de pas marcher très correctement à cause des marges de ton <p/>

 

Essaye d'abord sans le <p/>

 

Donc en résumé, dans ton head :

 
Code :
  1. <script type="text/javascript">
  2.     window.addEvent('domready', function(){
  3.         $('texte').slide('hide');
  4.         $('etatmenu').addEvent('click', function(){
  5.             $('texte').slide('toggle');
  6.         });
  7.     });
  8. </script>
 

Dans ton HTML :

 
Code :
  1. <div>
  2.     <a id="etatmenu" href="#" onclick="return false;">Afficher la suite</a>
  3. </div>
  5. <div id="texte">
  6.     Texte a afficher
  7. </div>


Message édité par Dj YeLL le 06-09-2009 à 16:26:28

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2009 à 16:35:23    

Merci merci ça marche j'ai juste viré le "e"..  
Et toute façon j'ai pas de <p> en fait. C'était juste pour l'exemple.

Reply

Marsh Posté le 06-09-2009 à 16:38:28    

Ok :jap:


---------------
Gamertag: CoteBlack YeLL
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed