afficher/cacher en jquery

01 oct. 2009, 09:54

Bonjour je voudrais reecrire ce code qui marche tres bien en javascript simple en utilisant jQuery

function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='-';
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='+';
        }
        return true;
}

jai fait comme ça mais ça marche pas

Code : Tout sélectionner

function afficher_cacher(id)
{
id='#'id;        
if($(id).css({visibility:"hidden"})
        {
                $(id).css({'visibility':'visible'});
                document.getElementById('bouton').innerHTML='-';
        }
        else
        {
                $(id).css({'visibility':'hidden'});
                document.getElementById('bouton_'+id).innerHTML='+';
        }
        return true;
}

le petit signe + et - c'est quand je clique sur + c'est pour affiche et - c'est cacher
merci pour votre conseil

01 oct. 2009, 11:07

regarde la fonction show et hide de jquery http://jquery.developpeur-web2.com/docu ... s/show.php

01 oct. 2009, 12:42

Remplace tes innerHTML par la methode html() de jquery
Ensuite pour déterminer si ton élément est visible ou non essaye avec la méthode is()

Code : Tout sélectionner

if($(elmt).is(':visible'))

Et puis comme indiqué par Cobaye utilise les méthode show() et hide() (voir toggle() )

01 oct. 2009, 13:09

+1 pour toggle, d'ailleurs sachez qu'on peut l'utiliser avec des fonctions en paramètres : chaque clic exécutera la fonction suivante (en boucle).

[javascript]
// chaque clic sur "#bouton" alterne le statut de "#"+id
(function($) {
var callback_hide = function() { $("#"+id).hide(); $(this).html("+"); }
var callback_show = function() { $("#"+id).show(); $(this).html("-"); }
// état initial
callback_hide();
// toggle
$("#bouton").toggle(callback_show, callback_hide);
})(jQuery, id);
[/javascript]

Sinon pour reprendre exactement ton exemple :
[javascript]
function afficher_cacher(id)
{
var visible = $("#"+id).toggle().is(":visible");
$("#bouton").html(visible ? "-" : "+");
}
[/javascript]
Mais comme derrière il y a un onclick & cie, je pense que mon premier exemple ira un peu plus loin dans la résolution de ton problème.

Je te laisse analyse ces morceaux de code qui contiennent des bases que tu dois toutes maîtriser si tu veux comprendre ce que tu fais avec jQuery, donc n'hésite pas à poser des questions sur les parties que tu ne comprendrais pas.
Et n'hésite pas non plus à potasser : http://docs.jquery.com

18 mars 2010, 12:06

Bonjour a tous,

quelqu'un aurait-il le code html de correspondant a ce script SVP (cad celui de cette discussion), MERCI

Code : Tout sélectionner

// chaque clic sur "#bouton" alterne le statut de "#"+id
(function($) {
  var callback_hide = function() { $("#"+id).hide(); $(this).html("+"); }
  var callback_show = function() { $("#"+id).show(); $(this).html("-"); }
  // état initial
  callback_hide();
  // toggle
  $("#bouton").toggle(callback_show, callback_hide);
})(jQuery, id);

18 mars 2010, 12:52

Si tu poses cette question, c'est que tu ne comprends pas le script, et que te répondre ne constituerait pas un acte pédagogique qui est le rôle de ce forum

Pose-nous donc la vraie question : que ne comprends-tu pas dans ce script, qu'on te l'explique et que ça te permette de deviner tout seul que le "HTML" lié est forcément un tag <A> avec un id qu'on passe à la fonction.

27 mars 2010, 17:10

j'ai ce bout de code qui est pas mal
il permet de fermer et ouvrir un div en changeant sa class
et utilise .slide

Code : Tout sélectionner

/*-------- toggle des listes ----------*/
$(document).ready(function(){

	//Hide (Collapse) the toggle containers on load
	$(".liste_container").hide(); 

	//Switch the "Open" and "Close" state per click (+ ou - dans le CSS)
	$(".liste_visible").toggle(function(){ // on pourrais aussi utiliser toggleClass
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//ouverture et fermeture par glissé
	$(".liste_visible").click(function(){
		$(this).next(".liste_container").slideToggle("slow");
	});

});
/*-------- toggle des listes ----------*/

et pour le html

<h3 class="liste_visible"><a href="#">info complementaire</a></h3>

<div class="liste_container" style="display: none;">
	<div class="block">
		[content...]
	</div>
</div>

avantage tu peux aussi changer la classe du lien
(mettre des images en background différentes quand c'est ouvert ou fermé -> si il y a ou non la classe ".active")

29 mars 2010, 13:03

En fait j'utilise ce code (qui fonctionne trés bien), mais je voudrais ajouter le petit [+] et/ [-] ou une image + / -
j'ai essayé d'adapter le code en question (en haut de page), mais jusqu'ici sans succés..

merci de votre aide ..

voici mon code actuel

Code : Tout sélectionner

$(document).ready(function() {	
	// cache tout l'element ayant la class
	$(".jsContenu").hide();

	// toggle affiche/masque la class
	$(".jsEntete").click(function(){
		$(this).next(".jsContenu").slideToggle(250);
	});
});

afficher/cacher en jquery

Qui est en ligne