Cacher div
jordxn
-
Nhay Messages postés 838 Date d'inscription Statut Membre Dernière intervention -
Nhay Messages postés 838 Date d'inscription Statut Membre Dernière intervention -
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>
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>
2 réponses
-
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. -
<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
