Jquery faire apparaitre une div au clic
Résolu/Fermé
laurenzo17
Messages postés
450
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
26 avril 2012
-
16 juin 2011 à 10:14
laurenzo17 Messages postés 450 Date d'inscription jeudi 23 août 2007 Statut Membre Dernière intervention 26 avril 2012 - 16 juin 2011 à 12:46
laurenzo17 Messages postés 450 Date d'inscription jeudi 23 août 2007 Statut Membre Dernière intervention 26 avril 2012 - 16 juin 2011 à 12:46
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?
A voir également:
- Jquery faire apparaitre une div au clic
- Apparaitre hors ligne instagram - Guide
- Comment faire apparaître la tabulation sur word - Guide
- Comment faire apparaître le curseur sans souris - Guide
- Comment faire apparaître le clavier sur une tablette - Guide
- Atout clic - Télécharger - Éducatifs
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>
<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';
};
}
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>
<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>
laurenzo17
Messages postés
450
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
26 avril 2012
124
16 juin 2011 à 12:46
16 juin 2011 à 12:46
Merci beaucoup pour tes réponses :)
j'ai trouvé un autre moyen mais je garde ton code sous la main au cas ou ;)
j'ai trouvé un autre moyen mais je garde ton code sous la main au cas ou ;)