Jquery faire apparaitre une div au clic
Résolu
Bonjour,
je cherche comment je pourrais faire apparaitre/disparaitre une div sur ma page web quand je clique sur un certain bouton.
Cette div doit apparaitre et disparaitre sur la gauche de l'écran.
Quelqu'un connait une solution?
je cherche comment je pourrais faire apparaitre/disparaitre une div sur ma page web quand je clique sur un certain bouton.
Cette div doit apparaitre et disparaitre sur la gauche de l'écran.
Quelqu'un connait une solution?
3 réponses
-
Voili Voilou :
<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> -
Sinon tu peux utiliser une autre fonction :
function archives(id)
{
var archive=document.getElementById(id).style;
if(archive.display=='block'){
archive.display='none';
} else {
archive.display='block';
};
}-
-
Voili Voilou (sans le double clic) :
<html>
<head>
<script type="text/javascript">
function archives(id)
{
var archive=document.getElementById(id).style;
if((archive.display=='block') | (archive.display=='')){
archive.display='none';
} else {
archive.display='block';
};
}
</script>
</head>
<body>
<h1>Titre </h1>
<p>Contenu précédant </p>
<a href="#" onclick = "archives('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>
-
-
Merci beaucoup pour tes réponses :)
j'ai trouvé un autre moyen mais je garde ton code sous la main au cas ou ;)
