Jquery faire apparaitre une div au clic
Résolu
laurenzo17
Messages postés
450
Date d'inscription
Statut
Membre
Dernière intervention
-
laurenzo17 Messages postés 450 Date d'inscription Statut Membre Dernière intervention -
laurenzo17 Messages postés 450 Date d'inscription Statut Membre Dernière intervention -
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 clavier sur une tablette - Guide
- Comment faire apparaître le curseur sans souris - Guide
- Apparaitre hors ligne whatsapp - Guide
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>