Afficher et cacher (jquery)

korka -
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention - 31 mars 2019 à 22:14

Bonjour,

je suis un petit débutant en jquery

mais je cherche un code qui permet afficher et cacher un texte

merci de votre aide

Configuration: Windows / Chrome 73.0.3683.86

Afficher la suite

2 réponses

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

Penche toi sur les fonctions : .show() et .hide()

korka

j'ai trouvé ca

 <div id="guide_1_div"><p>TEXTE</p></div>
        <button id="guide_1">Afficher</button>

#guide_1_div{
   display: none;
}

$(document).ready(function(){
    $(document).on('click', function(){
         if($(this)[0].activeElement.id == "guide_1"){
             $("#guide_1_div").css("display", "block");
         }
         else{
             $("#guide_1_div").css("display", "none");
         }
    });  
});

il faut que je clique 5 fois de suis pour cacher

il faut indiquer le mot afficher et cacher

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

$(document).ready(function(){
    $("#guide_1").click(function(){
      if($("#guide_1_div").is(":hidden")){
       $("#guide_1_div").show();
      }else{
       $("#guide_1_div").hide();
     }
   });  
});

korka

merci, mais quand je met ce code, il me fait bug tout

mais je vais essayer rouver un autre code
0

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Le code que je t'ai donné fonctionne parfaitement.
Tu n'as qu'à vérifier par toi même

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device=width, initial-scale=1.0">
      <title>TEST</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	  <style>
	  #guide_1_div{
	   display: none;
	}
	</style>
  </head>
  <body>
   
 <div id="guide_1_div"><p>TEXTE</p></div>
        <button id="guide_1">Afficher</button>
    <script>
      $(document).ready(function(){
    $("#guide_1").click(function(){
      if($("#guide_1_div").is(":hidden")){
       $("#guide_1_div").show();
      }else{
       $("#guide_1_div").hide();
     }
   });  
});
      
    </script>
  </body>
</html>

Si, en ajoutant ce code, ton code plante.. c'est que tu as un souci ailleurs.

Pour voir où se situe le souci, tu dois commencer par regarder la CONSOLE de ton navigateur. C'est un minimum lorsqu'on code en javascript....

Afficher et cacher (jquery)

2 réponses

Discussions similaires

Newsletters