Afficher / Masquer des <div> (Jquery)
Résolu
Bengt
-
Bengt -
Bengt -
Bonjour,
Je viens vous demander de l'aide à propos d'un petit soucis d'affichage.
Il se trouve que j'affiche un certain nombre d'entrées (divisées en deux <div> séparées verticalement ) après une requête ajax.
Par défaut ces entrées sont cachées (j'ai testé avec css / display : none et avec .hide() de jQuery).
Je voudrais pouvoir afficher l'une ou l'autre des <div> en fonction d'un bouton sur lequel l'utilisateur clique.
Le problème c'est que je peux cacher n'importe quelle <div>, cependant l'affichage est limitée à la <div> supérieure, c'est à dire celle qui vient en première dans le DOM.
J'ai donc testé avec display et .show(), rien n'y fait j'ai toujours le même résultat.
Avez-vous une idée de comment faire pour pouvoir afficher la <div> sans ce soucier de l'odre dans le DOM ?
Merci de votre aide !
Je viens vous demander de l'aide à propos d'un petit soucis d'affichage.
Il se trouve que j'affiche un certain nombre d'entrées (divisées en deux <div> séparées verticalement ) après une requête ajax.
Par défaut ces entrées sont cachées (j'ai testé avec css / display : none et avec .hide() de jQuery).
Je voudrais pouvoir afficher l'une ou l'autre des <div> en fonction d'un bouton sur lequel l'utilisateur clique.
Le problème c'est que je peux cacher n'importe quelle <div>, cependant l'affichage est limitée à la <div> supérieure, c'est à dire celle qui vient en première dans le DOM.
J'ai donc testé avec display et .show(), rien n'y fait j'ai toujours le même résultat.
Avez-vous une idée de comment faire pour pouvoir afficher la <div> sans ce soucier de l'odre dans le DOM ?
Merci de votre aide !
A voir également:
- Afficher / Masquer des <div> (Jquery)
- Afficher appdata - Guide
- Masquer conversation whatsapp - Guide
- Comment masquer les amis sur facebook - Guide
- Comment appeler en masquer - Guide
- Afficher taille dossier windows - Guide
3 réponses
Ok, j'ai réfléchis et j'ai trouvé une solution plutôt sympa, un peu tirée par les cheveux mais sympa !
Comme on ne peut afficher un élément dans le DOM si l'élément précédent est caché, je me suis dis qu'il suffisait de changer leur position dans le DOM.
Ainsi dans les deux fonctions qui affiche les <div>, je vérifie la place dans l'élément dans le DOM avec .index() et si il vient après, je le place avant avec un .insertBefore().
Ensuite je l'affiche, que ce soit avec display: ou avec .show
Et ça fonctionne !
Merci de ton aide ;)
Comme on ne peut afficher un élément dans le DOM si l'élément précédent est caché, je me suis dis qu'il suffisait de changer leur position dans le DOM.
Ainsi dans les deux fonctions qui affiche les <div>, je vérifie la place dans l'élément dans le DOM avec .index() et si il vient après, je le place avant avec un .insertBefore().
Ensuite je l'affiche, que ce soit avec display: ou avec .show
Et ça fonctionne !
Merci de ton aide ;)
Salut
avec toggle()
<script type="text/javascript">
$(document).ready(function() {
$("#bouton1").click(function() {
$( "#div1" ).toggle();
});
$("#bouton2").click(function() {
$( "#div2" ).toggle();
});
})
</script>
<button id="bouton1">clic1</button>
<button id="bouton2">click2</button>
<div id="div1"></div>
<div id="div2"></div>
tu mets tes div en display:none avec css
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
avec toggle()
<script type="text/javascript">
$(document).ready(function() {
$("#bouton1").click(function() {
$( "#div1" ).toggle();
});
$("#bouton2").click(function() {
$( "#div2" ).toggle();
});
})
</script>
<button id="bouton1">clic1</button>
<button id="bouton2">click2</button>
<div id="div1"></div>
<div id="div2"></div>
tu mets tes div en display:none avec css
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.