Afficher et cacher (jquery)

korka -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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
A voir également:

2 réponses

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Penche toi sur les fonctions : .show() et .hide()
0
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
$(document).ready(function(){
    $("#guide_1").click(function(){
      if($("#guide_1_div").is(":hidden")){
       $("#guide_1_div").show();
      }else{
       $("#guide_1_div").hide();
     }
   });  
});
0
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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....
0