Afficher / Masquer des <div> (Jquery)

Résolu/Fermé
Bengt - 20 févr. 2014 à 11:40
 Bengt - 20 févr. 2014 à 15:59
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 !




A voir également:

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
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 20/02/2014 à 13:37
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.
0
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...
0