11528 sujets

JavaScript, DOM et API Web HTML5

Faire apparaitre et disparaitre une div: visibility : hidden au debut

Bonjour à tous!

Voilà en fait comme cela est indiqué dans le titre, j'ai voulu créer un formulaire où un input apparaît ou pas lorsqu'on clique sur un lien, je suis donc tombé sur ce sujet qui m'a beaucoup aidé:
http://forum.alsacreations.com/topic-5-19363-1.html
avec ce code:
<html>
<head>

<script type="text/javascript">

/** Fonction basculant la visibilité d'un élément dom
* @parameter anId string l'identificateur de la cible à montrer, cacher
*/
function toggle(anId)
{
	node = document.getElementById(anId);
	if (node.style.visibility=="hidden")
	{
		// Contenu caché, le montrer
		node.style.visibility = "visible";
		node.style.height = "auto";			// Optionnel rétablir la hauteur
	}
	else
	{
		// Contenu visible, le cacher
		node.style.visibility = "hidden";
		node.style.height = "0";			// Optionnel libérer l'espace
	}
}

</script>

</head>

<body>

	<h1>Titre </h1>
	<p>Contenu précédant </p>

	<a href="#" onclick = "toggle('foo')">Cliquer pour basculer l'état du div suivant</a>

	<!-- L'identificateur id du div doit être unique. Içi, "foo" ou "bar" ou autre, mais unique dans le document-->
	<div id="foo">Ce contenu est visible ou non selon le cas</div>

	<p>Contenu suivant </p>

</body>
</html>


Le seul problème étant que lorsque la page est chargée au tout début le div est déjà apparu alors que lorsque la page vient d’être chargée j'aimerai que le div n'apparaisse pas.

Pourriez vous m'aider svp?

Merci d'avance
Modérateur
Salut,

Dans ton css, as-tu défini
#foo {
      visibility:hidden;
}

pour qu'il soit invisible de base ?

EDIT : Mea culpa j'a confondu display et visibility Smiley sweatdrop Fin de journée plutôt dure !
re-EDIT : les guillemets sur hidden... vraiment très dure la journée... je vais aller dormir
Modifié par _laurent (14 Jun 2012 - 17:16)
Oui j'avais déja éssayé mais ca masquait completement et tout le temps mon input etant donné que la fonction javascript utilise visibility.
J'avais donc éssayé:
#foo {
      visibility: hidden;
}


Mais cette fois il faut cliquer 3 fois pour que ça apparaisse la première fois.
Modérateur
mmmmh

Je vais laisser la main pour ce soir... je suis pas en forme la !

J'ai codé a peu pres la même fonctionalité mais en jouant avec les classes. En gros j'avais une classe avec le visibility:visible et une autre avec visibility:hidden. Au clic sur l'élément je lançais la fonction :
document.getElementById(foo).className = 'classquirendinvisible';


Je sais pas si ca va pouvoir t'aider.

Pour les 3 secondes ça ressemble à une petite latence due au chargement de la page et des fonctions...
Non c'est pas 3 secondes Smiley smile , je disais je dois cliquer 3 fois , et en fait c'est 2 fois. J'ai l'impression que la premiere fois ça ne prend pas en compte le fait qu'il est déja en hidden c'est pourquoi je dois cliquer 2 fois, la premiere fois.
Modérateur
Smiley bawling soirée de la lose

et si tu mets le style dans la balise (moche hein, mais pour voir) :
<div id="foo" style="visibility:hidden;">Ce contenu est visible ou non selon le cas</div>

Modifié par _laurent (14 Jun 2012 - 17:34)
Lool, oui maintenant ça marche très bien. Pourquoi losrque je mets le css dans cette balise dans le fichier cass habituel à part ça ne marche pas?

Merci beaucoup
Modérateur
A mon avis il doit y avoir un truc du genre : le JS applique le changement direct au style de la balise définie par l'Id et pas au style de l'Id lui même (je suis clair ?).

En gros tu modifies pas #foo mais le style de la <div> nommée #foo

Après je peux me tromper, j'ai pas la vérité la dessus désolé... si quelqu'un peut confirmer...
D'accord merci beaucoup, cette réponse est déjà très satisfaisante. Si quelqu'un peut confirmer.
salut Farror, voici une solution qui fonctionne. AU chargement de la page (window.onload) on met la <div id="foo"> à "visibility:hidden" comme tu le désires à partir de la fonction Hide("foo");

Ensuite, il y a deux fonctions Show() et Hide() qui vont faire la bascule entre visibility à visible ou à hidden.

Voici le document html contenant le code javascript :
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
function Hide (addr) { document.getElementById(addr).style.visibility = "hidden";	}
function Show (addr) { document.getElementById(addr).style.visibility = "visible";	}

function toggle(anId)
{
	if (document.getElementById(anId).style.visibility == "hidden")	{	Show(anId);	}
	else															{	Hide(anId);	}
}

window.onload = function () { Hide("foo");	};
</script>

</head>

<body>
	<h1>Titre</h1>
	<p>Contenu précédant </p>
	<a href="#" onclick = "toggle('foo');">Cliquer pour basculer l'état du div suivant</a>
	<div id="foo">Ce contenu est visible ou non selon le cas</div>
	<p>Contenu suivant </p>
</body>
</html>
Bonjour,

donc voici mon problème :

j'ai une image, un menu et une indication.

Au démarrage de la page j'ai uniquement l'image et l'indication, l'indication me dit "cliquez sur l'image pour afficher le menu".

donc jusque là j'ai réussi à adapter le script à l'image, mais ou je suis bloqué c'est que la fonction me masque ou affiche le menu et l'indication en même temps alors que je voudrai alterner l'affichage sois entre l'indication ou le menu. Comment puis-je procéder?
Salut faror, juste une remarque, pourquoi utilisez la sauce "visibility" et "height=0 ou auto" alors qu'un display : none/block fait la même chose Smiley cligne
Sujet clos
Aller à