Sujet Précédent Sujet Suivant

Cacher div

Fermé
jordxn - 27 janv. 2014 à 19:36
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 - 28 janv. 2014 à 12:35
Bonjour,

J'ai réussi a cacher une div avec du javascript mais au début elle n'ai pas caché (c'est quand je clique dessus , quelle disparait) Or j'aimerais des le début qu'elle soit caché et que si on clique dessus elle apparaît...

<html>
<head>
<script type="text/javascript">

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>

A voir également:

2 réponses

Réponse 1 / 2
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
27 janv. 2014 à 19:57
Bonjour,
Deux Solutions :

1) CSS => tu rajoute visibility:hidden; sur ta div
2) JS => tu le fais en JS, en reprenant ce que tu a déjà en dehors de la fonction (donc tu lui fais ton style.visibility)

Par contre, je ne vois pas pourquoi tu n'utilise pas la propriété display none/block au lieu de visibility si tu change ensuite l'height, le display none te fais les deux d'un seul coup.
0
Réponse 2 / 2
jordxn
27 janv. 2014 à 20:01
<script type="text/javascript">

function toggle(anId)
{
node = document.getElementById(anId);
if (node.display=="none")
{
// Contenu caché, le montrer
node.display=="none";
}
else
{
// Contenu visible, le cacher
node.display=="block"
}
}


Mais cela ne fonctionne plus
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
28 janv. 2014 à 12:35
display c'est toujours une propriété css, donc settable via .style
0

Discussions similaires

Cacher les membres du groupe WhatsApp
RegimeSevaire -
NADhair -

3 réponses
erreur (#DIV/0) formule MOYENNE.SI.ENS
sara-87 -
sara-87 -

5 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Facebook - Peut-on cacher un ami à ses amis?
jean -
Titi -

35 réponses