Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1184 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Afficher/cacher un texte toggle mootools

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Afficher/cacher un texte toggle mootools

n°1921557
zazounn
Posté le 05-09-2009 à 20:15:58  profilanswer
 

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

mood
Publicité
Posté le 05-09-2009 à 20:15:58  profilanswer
 

n°1921564
Dj YeLL
$question = $to_be || !$to_be;
Posté le 05-09-2009 à 21:51:37  profilanswer
 

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
n°1921635
zazounn
Posté le 06-09-2009 à 16:06:00  profilanswer
 

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

n°1921638
Dj YeLL
$question = $to_be || !$to_be;
Posté le 06-09-2009 à 16:08:58  profilanswer
 

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
n°1921642
zazounn
Posté le 06-09-2009 à 16:13:40  profilanswer
 

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 !

n°1921646
zazounn
Posté le 06-09-2009 à 16:17:35  profilanswer
 

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 !!

n°1921650
Dj YeLL
$question = $to_be || !$to_be;
Posté le 06-09-2009 à 16:25:42  profilanswer
 

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>
  4. <div id="texte">
  5.     Texte a afficher
  6. </div>


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

---------------
Gamertag: CoteBlack YeLL
n°1921652
zazounn
Posté le 06-09-2009 à 16:35:23  profilanswer
 

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.

n°1921654
Dj YeLL
$question = $to_be || !$to_be;
Posté le 06-09-2009 à 16:38:28  profilanswer
 

Ok :jap:


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Afficher/cacher un texte toggle mootools

 

Sujets relatifs
Cacher dossiers/fichiersComment convertir du code html en texte lisible
texte arabe sur une image en php"Enregistrer sous" un texte via "div"
afficher dates et noms de lieuxafficher (avec JavaScript) les caractères correspondants aux codes
afficher infos autre pageAfficher lisiblement un code VBA sur un doc word
Problème de texte décalé verticalement dans la <div> de droite[FIXED]Pop up en javascript pour afficher un player Mp3.
Plus de sujets relatifs à : Afficher/cacher un texte toggle mootools


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR