fonction GENERIQUE pour afficher/cacher des DIV

fonction GENERIQUE pour afficher/cacher des DIV - HTML/CSS - Programmation

Marsh Posté le 22-02-2008 à 16:18:32    

Bonjour,
 
Je cherche à afficher/cacher des éléments au clic sur un lien.
 
(page de question/reponse : on affiche la reponse au clic sur la question.
 
mon code marche mais il n est pas generique :
 

Code :
  1. <style type="text/css" media="screen">
  2. div.visible {
  3. visibility:visible;
  5. }
  6. div.hidden {
  7. visibility:hidden;
  8. }
  9. </style>
  10. <script type="text/javascript">
  12. function part1() {
  13. var rep01 = document.getElementById('rep01');
  14. if ( rep01.className == 'hidden' ) {
  15. rep01.className = 'visible';
  16. } else {
  17. rep01.className = 'hidden';
  18. }
  19. }
  21. function part2() {
  22. var rep02 = document.getElementById('rep02');
  23. if ( rep02.className == 'hidden' ) {
  24. rep02.className = 'visible';
  25. } else {
  26. rep02.className = 'hidden';
  27. }
  28. }
  29. </script>
  30. </head>
  32. <body>
  34. <div id="qu01"><a onclick="part1();"  href="#">Question 1</a></div>
  35. <div class="hidden" id="rep01">reponse a la question 1</div>
  38. <div id="qu02"><a onclick="part2();" href="#">Question 2</a></div>
  39. <div class="hidden" id="rep02">reponse a la question 2</div>
  41. </body>
  42. </html>


 
J'ai bien tenté de faire une fonction générique mais... ca ne marche pas :
 

Code :
  1. <style type="text/css">
  2. div.visible {
  3. visibility:visible;
  4. }
  5. div.hidden {
  6. visibility:hidden;
  7. }
  8. </style>
  9. <script type="text/javascript">
  11. function showRep(id){
  12. id = document.getElementById(id);
  13. if ( id.className == 'hidden' ) {
  14. id.className= 'visible';
  15. } else {
  16. id.className= 'hidden';
  17. }
  18. </script>
  19. </head>
  21. <body>
  23. <div id="qu01"><a onclick="showRep("rep01" );"  href="#">Question 1</a></div>
  24. <div class="hidden" id="rep01">reponse a la question 1</div>
  26. <div id="qu02"><a onclick="showRep("rep02" );" href="#">Question 2</a></div>
  27. <div class="hidden" id="rep02">reponse a la question 2</div>
  29. </body>


 
A l'aide !!  
Merci :):):) (je sais que c'est basique comme question, mais je vous jure que j ai cherché avant de poster !)
XXX

Reply

Marsh Posté le 22-02-2008 à 16:18:32   

Reply

Marsh Posté le 22-02-2008 à 16:54:26    

Évidemment que ça ne fonctionne pas ton code HTML est foireux. Indice: regarde la valeur que tu donne à l'attribut onclick.

Reply

Marsh Posté le 22-02-2008 à 18:21:35    

.. onclick="ShowRep('rep01');" ?
ou je suis completement a cote... ?

Reply

Marsh Posté le 22-02-2008 à 19:44:11    

Bah ouais.
 
Edit: je voulais dire, c'est bien ça qu'il fallait remplacer, pas que t'étais à coté de la plaque, hein ...


Message édité par tpierron le 22-02-2008 à 19:44:58
Reply

Marsh Posté le 23-02-2008 à 11:36:49    

Bof.
 
Moi je ferais :

Code :
  1. function changervisibilite(thingId)
  2. {
  3. var targetElement;
  4. targetElement = document.getElementById(thingId) ;
  5. if (targetElement.style.display == "none" )
  6. {
  7.  targetElement.style.display = "" ;
  8. }
  9. else
  10. {
  11.  targetElement.style.display = "none" ;
  12. }
  13. }


Et là tu appel toujours cette même fonction.
 
Dans ton cas:

Code :
  1. <div><a onclick="changervisibilite(rep01);"  href="#">Question 1</a></div>
  2. <div id="rep01" style="display:none;">reponse a la question 1</div>


Par contre je n'utiliserais pas href="#" car ca va te faire remonter en haut de la page, utilise plutot :

Code :
  1. <div><a href="javascript:changervisibilite('rep01')">Question 1</a></div>
  2. <div id="rep01" style="display:none;">reponse a la question 1</div>


 
;)

Message cité 1 fois
Reply

Marsh Posté le 25-02-2008 à 08:31:36    

Merci beaucoup !
C'est super :)

Reply

Marsh Posté le 25-02-2008 à 09:38:28    

yann39 a écrit :

Par contre je n'utiliserais pas href="#" car ca va te faire remonter en haut de la page, utilise plutot :

Code :
  1. <div><a href="javascript:changervisibilite('rep01')">Question 1</a></div>
  2. <div id="rep01" style="display:none;">reponse a la question 1</div>




Nan mais nan hein :o
on mets pas javascript dans un attribut href.
Les "moins pires pratiques" (et encore, c'est pas le top) voudraient plutot qu'on fasse:

Code :
  1. <a href="unPagePourExpliquerQueSansJsMonSiteMarchePas.html" onclick="return maFonction()"> ...


et ensuite dans ta fonction

Code :
  1. function maFonction(){
  2. /*** ...
  3. des trucs
  4. ... ***/
  5. return false;
  6. }



---------------
Software and cathedrals are much the same - first we build them, then we pray.
Reply

Marsh Posté le 25-02-2008 à 13:08:06    

Citation :

Nan mais nan hein :o  
on mets pas javascript dans un attribut href.


 
Pourquoi ?  
J'ai déjà entendu parler de cette histoire mais les arguments restent assez vague...
 
J'y vois que des avantages moi mis à part que l'utilisateur qui n'a pas js activé ne verra rien.

Message cité 2 fois
Reply

Marsh Posté le 25-02-2008 à 13:13:38    

yann39 a écrit :

J'y vois que des avantages moi


lesquels :??:

yann39 a écrit :

mis à part que l'utilisateur qui n'a pas js activé ne verra rien.


ce qui est un inconvénient majeur tu en conviendras ...
 
 


---------------
Software and cathedrals are much the same - first we build them, then we pray.
Reply

Marsh Posté le 25-02-2008 à 13:15:44    

yann39 a écrit :

J'y vois que des avantages moi mis à part que l'utilisateur qui n'a pas js activé ne verra rien.


Ou celui qui fait Ctrl+Click ou Shift+Click pour ouvrir dans une nouvelle fenêtre/nouvel onglet non plus :(

Reply

Marsh Posté le 25-02-2008 à 13:15:44   

Reply

Marsh Posté le 25-02-2008 à 16:26:16    

Bon en effet il n'y a que des avantages,
va falloir que je mette à jour mon code.
 
Merci pour la remarque ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed