Afficher/masquer plusieurs div à un seul endroit

Question

Bonjour à tous et bon début de semaine.

 
Je ne n'arrive pas à réaliser un affichage de div géré par le
clic de la souris malgrès les tutoriaux de goolgle " Afficher/masquer
un div".  car ces derniers ne répondent pas à ma question.

 
En fait j'aurais voulu réaliser une page de la facon suivante:

Pour faire simple, j'ai une liste de mots ( les mois de l'année) et
je voudrais que en cliquant sur janvier il apparaisse en dessous dans
un div un texte descriptif sur le mois de janvier et lorsque je clique
sur février il y ai un texte descriptif du mois de février à la place
de celui de janvier.

 
J'ai essayé plusieurs méthode en passant par le javascript et
getElementById mais sur tous les sites où je suis allé getElementById
est utilisé pour afficher /masquer un div or je ne veux pas que
l'utilisateur ai à fermer la description de janvier pour lire celle de
février mais juste à cliquer sur février.

 
En espérant avoir été clair.   
Je remercie d'avance tout celle et ceux qui prendront le temps de lire mon message.

cs_bultez · Answer

bonjour, getElementById ce n'est jamais qu'une manière d'adresser un élément, rien de plus. soit tu n'utilises qu'un div, dans lequel tu met le descripif du mois voulu. soit tu utilises 12 div, et quand tu en affiches un, tu caches le précédent.

Cordialement Bul [mon Site] [M'écrire]

En général, c'est absurde de généraliser.

kvf300 · Answer

Bonjour

Merci pour ta réponse, néanmoins je souhaiterai pouvoir cliquer sur n'importe quel mois de l'année et que dans un div soit affiché la description du mois, ensuite je voudrais pouvoir cliquer sur un autre mois et voir apparaitre un autre div à la place du précédent et enfin je voudrais pouvoir cliquer sur le mois de juin après le mois de janvier ou sur le mois de décembre après le mois d'octobre en fait je n'ai pas d'ordre.

Merci d'avance

cs_bultez · Answer

>>néanmoins je souhaiterai pouvoir cliquer sur n'importe quel mois de l'année >>et que dans un div soit affiché la description du mois, ensuite je voudrais >>pouvoir cliquer sur un autre mois et voir apparaitre un autre div à la place >>du précédent et enfin je voudrais pouvoir cliquer sur le mois de juin après >>le mois de janvier ou sur le mois de décembre après le mois d'octobre >>en fait je n'ai pas d'ordre. donc : _ soit tu n'utilises qu'un div, dans lequel tu y met ce que tu veux en fonction du mois chosi. _ soit tu utilises 12 div, 1 pour chaque mois, quand tu en affiches un, tu caches le précédent affiché ( pas le mois précédent ! le précédent afffiché ) ou alors, tu affiches tous les div au même endroit.

Cordialement Bul [mon Site] [M'écrire]

En général, c'est absurde de généraliser.

capoueidiablo · Answer

Je ne suis pas tout à fait d'accord avec les 12 Div à créer ... parce que à chaque click vous allez parcours les 12 élèments soit 12 itérations + 12 test et/ou affectation de visibilité ... donc niveau perf je ferai ca :

- définition d'un "hashmap" en constante ... chercher la syntaxe javascript ...
  [{'janvier','le mois ou tu peux frimer'},{'février','reste au chaud dans tes souliers'},{'mars','et ca reppart'},{'avril','ne te découvre pas d'un fil'},...]

- ajout d'un listener ou d'un onclick sur la liste déroulante appelant une fonction du type
   onclick="afficherDetail (this, 'monDivDeDestination')"

- on met à jour le div
   function afficherDetail (combo, destination) {
     document.getElementById(destination).innerHtml = monHashTable[combo.selectedValue]
   }

voila, bon, y'a surement des propriétés qui existent pas parceque j'ai pas le temps d'aller chercher et de tester mais dans l'idée c'est ca :o)

d'autre part, on peut créer le div de destination en DOM s'il n'existe pas et ré-utiliser ce dernier ... en gros ca donne ca :
  var domDiv = document.getElementById ('monDivDeDestination');
  if (undefined = domDiv)
 {
    domDiv = document.createElement("DIV");
    domDiv.id = 'monDivDeDestination';
    combo.parentNode.appendChild(domDiv) // à toi de voir ou tu veux le mettre ... :o)
  }
  domDiv.innerHtml ...

Bon courage :)

--=Capoueidiablo=--

Afficher/masquer plusieurs div à un seul endroit

4 réponses

Votre réponse

Discussions similaires