Afficher / Masquer des <div> (Jquery) [Résolu/Fermé]

Signaler
-
 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 !




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 ;)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60990 internautes nous ont dit merci ce mois-ci

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
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.
Malheureusement, ça ne change rien.
Sachant que quand j'affiche l'un, j'enlève l'autre, la seconde <div> refuse toujours de s'affiche si la première est cachée...