jquery ajouter une cliquable fonction

Question

Je suis en train d'ajouter un texte que lorsque vous cliquez dessus, cache l'élément auquel il est ajouté, mais reste visible, et puis quand on clique dessus à nouveau, fait l'élément réapparaîtra:

jQuery(document).ready(function($){ 
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     $(".searchandfilter").css("height", "0px"); 
    }); 
} 
}); 

Je sais que je devrais utiliser la fonction toggle mais je suis un peu perdu quant à la façon de l'implémenter car je n'arrive même pas à cacher l'élément en cliquant.

Merci d'avance!

Answer 1

Un } supplémentaire était cause de casser le code et l'utilisation toggle() fait afficher et masquer travailler.

Voici la version fixe de votre code:

jQuery(document).ready(function($){ 
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     // Use toggle instead 
     //$(".searchandfilter").css("height", "0px"); 
     $(".searchandfilter").toggle(); 
    }); 
//} /* extra, cause of breaking */ 
}); 

Ceci est une autre façon:

jQuery(document).ready(function($){ 
    var $clickMe = $('<span/>',{ 
     class:'click-me', 
     text:'Click Here For Filter Options' 
    }); 

    $clickMe.insertBefore('.searchandfilter'); 

    $(".click-me").click(function() { 
     $(".searchandfilter").toggle(); 
    }); 

}); 

JsFiddle

Answer 2

Dans votre exemple, vous avez un } égaré, ce qui est probablement la raison pour laquelle cela ne fonctionne pas.

Voici un exemple de travail, que j'ai un peu amélioré.

codepen

toggle jQuery fonctionne bien ici.

$(function() { 
 
    $('<span>Show/Hide Filter Options</span>') 
 
     .insertBefore('.searchandfilter') 
 
     .click(function() { 
 
      $(".searchandfilter").toggle(); 
 
     }); 
 
});

<div class="searchandfilter">Some content</div>