Masquer toutes les autres DIV

J'utilise une liste déroulante <select>

Sujet résolu

11 septembre 2010 à 12:43:38

Bonjour,

j'essaie de mettre en place une liste déroulante (dropdown list, selectmenu...) qui, lorsqu'on sélectionne un élément, affiche la DIV correspondante et masque toutes les autres si elles étaient affichées. Petit plus : j'utilise jQuery pour faire un select un peu stylé (bien que cette info ne soit pas vraiment utile pour résoudre mon problème...).

Le problème donc est que je n'arrive pas à faire en sorte de masquer les autres DIV lorsqu'on en sélectionne une dans la liste. Je sais ce que vous allez me dire, "fais une recherche le problème a été évoqué mille fois sur le SdZ ou ailleurs sur le net", oui mais je n'arrive pas à adapter les scripts Javascript que je trouve pour mon cas.

Ma page est en PHP car j'utilise un header aléatoire à chaque actualisation et un compteur de votes (qui d'ailleurs a un bug... mais ce n'est pas l'endroit pour discuter PHP ^^).

En réalité, je ne connais pas le Javascript. J'ai donc déjà fait des recherches pour mettre en place tout ce que j'ai déjà fait sur le site (en parlant de ça, voilà l'adresse : là).

J'ai donc 6 DIV différentes : fg9, fg8, tcs2, tcs1, w6 (fg9 et tcs2 ne sont pas encore fonctionnelles). Elles sont en display:none par défaut et j'ai trouvé sur un topic du SdZ qu'on peut les passer en display:block grâce à cet évènement sur le select :

onchange="document.getElementById(this.options[this.selectedIndex].value).style.display='block'

Ce que je connais un peu, c'est la logique de la programmation en général. Je m'étais dit que, peut-être, une solution pour résoudre le problème serait d'ajouter une condition dans le onchange qui masque toutes les autres DIV, genre "onchange = afficher_la_div_sélectionnée ET masquer_les_autres", ce qui donnerait un genre de :

onchange="((document.getElementById(this.options[this.selectedIndex].value).style.display='block')&&(document.getElementById(!this.options[this.selectedIndex].value).style.display='none'))"

mais comme vous l'aurez deviné (en regardant avec effroi le bidouillage ci-dessus ^^) ça ne marche pas.

Pourriez-vous m'indiquer dans quelle direction chercher, ou par exemple l'algorithme du script qui permettrait de n'en afficher qu'une seule et de masquer toutes les autres ?

Merci d'avance !

Golmote

11 septembre 2010 à 12:55:52

Si tu utilises jQuery, profites-en pour l'utiliser partout.

Donc fini les getElementById() etc.

Le principe est le suivant, à toi d'adapter à ton cas :

<head>
<style type="text/css">
.class_commune_aux_divs_concernes {
  display:none;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {

  $('#id_du_select').change(function() {
    
    $('.class_commune_aux_divs_concernes').hide(); // On masque tous les divs
    
    $('#'+$(this).val()).show(); // On affiche celui ayant pour id le value de l'option sélectionnée
  
  });
  
});
</script>
<select id="id_du_select">
<option value="fg8">Afficher fg8</option>
<option value="fg9">Afficher fg9</option>
<option value="tcs1">Afficher tcs1</option>
<option value="tcs2">Afficher tcs2</option>
<option value="w6">Afficher w6</option>
</select>
<div id="fg8" class="class_commune_aux_divs_concernes" style="display:'';">FG8</div>
<div id="fg9" class="class_commune_aux_divs_concernes">FG9</div>
<div id="tcs1" class="class_commune_aux_divs_concernes">TCS1</div>
<div id="tcs2" class="class_commune_aux_divs_concernes">TCS2</div>
<div id="w6" class="class_commune_aux_divs_concernes">W6</div>
</body>

benji1000

11 septembre 2010 à 13:34:06

C'est parfait, ça marche ! Merci beaucoup.

Une question cependant pour bien comprendre tout le truc : qu'apporte style="display:'';" et surtout, dans une seule des DIV ? Car sans ça, ça marche quand même.

Petit effet indésirable : tous les tableaux se trouvant dans mes DIV ont perdu leur alignement au centre ! Ils sont désormais alignés à gauche.
J'utilisais une classe contenant text-align: center; pour la balise <table>.
À la limite, je pourrais résoudre le problème en leur faisant occuper toute la surface de la DIV, mais bon si t'as quand même une petite solution je ne dis pas non

Golmote

11 septembre 2010 à 14:50:39

Le display:'', c'était simplement pour rendre visible le premier des divs (puisque par défaut le premier choix de la liste est sélectionné).

Un display:block aurait été plus correct... (mauvais réflexe de JS =° )

Pour ton problème de CSS, j'en sais trop rien, j'ai pas bien compris...
T'as essayé de mettre un text-align:center dans la class commune aux divs ?

benji1000

11 septembre 2010 à 17:06:34

C'est pas grave, d'autant plus que ce n'est pas ce que je souhaitais (je voulais qu'aucune ne s'affiche au départ). La première option, c'est juste "Sélectionnez une série..." donc pas vraiment une option si on y réfléchit

Ce que je disais, c'est que dans chaque DIV, j'ai un tableau. Pour centrer chaque tableau dans sa DIV, j'utilise une classe dans <table>. Il y a, entre autre, text-align: center; dans cette classe.

Du genre :

<div id="w6" class="news_cachee">
<table class="sous-titres">
...
</table>
</div>

.sous-titres table {
...
text-align: center;
...
}

Et avant, ça marchait bien pour aligner le tableau dans ma DIV, mais maintenant que j'ai ajouté ton code pour le jQuery, ça ne marche plus (ça aligne à gauche). Ce serait intéressant de comprendre pourquoi, mais à la limite c'est pas grave, pour l'esthétisme je peux étirer le tableau sur toute la largeur de la DIV.

EDIT : trouvé ! En fait c'est un peu con, je comprends pas vraiment pourquoi... mais bon, voici la solution. Il faut mettre style="margin:0 auto;" dans la balise <table> du tableau que l'on veut centrer. J'avais bien entendu d'abord essayé de mettre cette propriété dans mon CSS, mais ça ne marchait pas o_O

donc ma foi, c'est dommage de ne pas séparer le fond de la forme pour ce coup, mais au moins ça marche...