[css/jvs]Derouler un div en cliquant un simple bouton

Derouler un div en cliquant un simple bouton [css/jvs] - HTML/CSS - Programmation

Marsh Posté le 26-05-2005 à 09:38:50    

Bonjour ;)
 
Je souhaiterais réaliser un truc tout bete:
 
J'ai une page html, avec au milieu un lien (ou un bouton, une image-boutons, etc).. Je voudrais que quand on clique sur ce lien, un div apparaisse en dessous contenant par exemple des infos sur le liens, décallant les eventuels autres liens situées en dessous.
 
Et que quand on réappuie sur le meme lien, la div soit re-caché..
 
J'ai trouvé de nombreux codes sur des menu deroulants, mais ils sont bien trop compliqués
 
meric beaucoup a vous

Reply

Marsh Posté le 26-05-2005 à 09:38:50   

Reply

Marsh Posté le 26-05-2005 à 09:43:00    

évènement: onclick
propriétés à modifier: style.display
aide: http://www.quirksmode.org
 
Autres:
document.getElementById
window.onload
 
voilà, normalement t'as tous les éléments pour réussir


Message édité par masklinn le 26-05-2005 à 09:44:05

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 09:45:14    

merci beaucoup, ca a l'air tout bete!
 
Je vous tient au courant

Reply

Marsh Posté le 26-05-2005 à 09:45:30    

+1


---------------
Expert en expertises
Reply

Marsh Posté le 26-05-2005 à 09:48:58    

Fait plutot ca avec des CSS et la pseudo classe :hover.
Ce sera encore plus simple en plus d'etre plus compatible et accessible

Reply

Marsh Posté le 26-05-2005 à 09:53:59    

afbilou a écrit :

Fait plutot ca avec des CSS et la pseudo classe :hover.
Ce sera encore plus simple en plus d'etre plus compatible et accessible


 
passera pas sous IE. :o


---------------
Expert en expertises
Reply

Marsh Posté le 26-05-2005 à 10:25:26    

Hermes le Messager a écrit :

passera pas sous IE. :o


 
/me propose de bruler IE  
 
---> []

Reply

Marsh Posté le 26-05-2005 à 10:26:02    

Salut ;)
Suis je sur le bon chemin? (j'en doute)
 
la fonction javascript du onclick :

Code :
  1. <SCRIPT LANGUAGE="text/javascript">
  2.  function deroul_div(object) {
  3.   if(document.getElementById("div_aff" ).className='aff_div') {
  4.    document.getElementById("div_aff" ).className='cache_div' }
  5.   else{document.getElementById("div_aff" ).className='aff_div'}
  6.  }
  7. </script>


le html :

Code :
  1. <div class="etapes"><a id="click_div" href="#" onClick="deroul_div(this)">E8 : Dossiers clôturés</a></div>
  2.  <div class="cache_div" id="div_aff">blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


 
css:

Code :
  1. .aff_div {
  2.  display:inline;
  3.  }
  4. .cache_div {
  5.  display :none;
  6.  }


 
Alors?
merci ;)


Message édité par bixibu le 26-05-2005 à 10:43:01
Reply

Marsh Posté le 26-05-2005 à 10:31:57    

suis pas expert mais ca a l'air bon, sauf que si le mec a pas js, ben DSC?
 
et met script language en minuscule ^^'


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 26-05-2005 à 10:38:45    

bha ca me plante en me disant "objet attendu".. ca chauqe fois j'ai cette erreur c'est chiant.. j'ai du oublier un truc
 
Ya peut etre mieu a faire en changeant directement la propriété display et donc en ne gardant qu'une seule class pour la div.. mais je sais pa storp comment faire pour changer la propriété direct via javascript
 

Reply

Marsh Posté le 26-05-2005 à 10:38:45   

Reply

Marsh Posté le 26-05-2005 à 11:12:48    

bixibu a écrit :

Salut ;)
Suis je sur le bon chemin? (j'en doute)
 
la fonction javascript du onclick :

Code :
  1. <SCRIPT LANGUAGE="text/javascript">
  2.  function deroul_div(object) {
  3.   if(document.getElementById("div_aff" ).className='aff_div') {
  4.    document.getElementById("div_aff" ).className='cache_div' }
  5.   else{document.getElementById("div_aff" ).className='aff_div'}
  6.  }
  7. </script>



Un script, ça s'écrit pas comme ça, l'attribut language existe pas, et ça s'écrit en minuscule :

<script type="text/javascript">
  [...]
</script>


   
 

bixibu a écrit :


le html :

Code :
  1. <div class="etapes"><a id="click_div" href="#" onClick="deroul_div(this)">E8 : Dossiers clôturés</a></div>
  2.  <div class="cache_div" id="div_aff">blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>



La div class="etapes" ne sert à rien ici.

Reply

Marsh Posté le 26-05-2005 à 11:23:39    

Un squelette :
 
HTML :

Code :
  1. <a href="#">texte, image, button ...<span>le contenu de la fenetre d'info</span></a>
  2. ...
  3. ...


 
CSS :

Code :
  1. a {
  2. position:    relative;
  3. }
  5. a span {
  6. display:    none;
  7. position:    absolute;
  8. top:     1.5em;
  9. left:     0em;
  10. z-index:    20;
  12. background-color:  #ffff99;
  13. border:    1px solid #556677;
  14. color:    green;
  15. }


 
SCRIPT :

Code :
  1. <script type="text/javascript">
  2. window.onload = function () {
  3.  var e = document.getElementsByTagName('a');
  4.  for (var i=0 ; i<e.length ; i++)
  5.  {
  6.   if (e[i].lastChild.nodeName == "SPAN" )
  7.   {
  8.    // On installe le gestionnaire d'evenement pour l'objet e[i]
  9.    // Le but etant de modifier e[i].lastChild.style.display à 'none' ou 'display'
  10.    // selon l'evenement.
  11.   }
  12.  }
  13. }
  14. </script>

Reply

Marsh Posté le 26-05-2005 à 11:25:51    

Citation :


Un script, ça s'écrit pas comme ça, l'attribut language existe pas, et ça s'écrit en minuscule :

<script type="text/javascript">
  [...]
</script>



   
[:alanou] Viens la que je t'embrasse ! Effectivement le probleme venait de la ! maintenant ca marche  
 
MERCI
 
Quand je clik ca affiche, mais quand je reclick ca ne re-cache pas.. mais je vais y arriver pour ce petit probleme!

Citation :

La div class="etapes" ne sert à rien ici.


 
c'est vrai, je vais le remplacer par un <h2>
 :hello:

Reply

Marsh Posté le 26-05-2005 à 11:47:48    

Salut afbilou ;)
 
Merci pour cette solution, que je vais regarder.. mais quand meme je suis si pret d'y arriver avec la methode que j'ai posté auparavant..
 
D'ailleurs j'ai un tout petit probleme: voila mon code :
 
html :

Code :
  1. <a id="click_div" href="#" onClick="deroul_div(this)">E8 : Dossiers clôturés</a>
  2.  <div class="aff_div" id="div_aff">
  3.   <p><ul class="enligne">
  4.    <li>PDURAN0003</li>
  5.    <li>PDURAN0003</li>
  6.    <li>PDURAN0003</li>
  7.   </ul></p>
  8.  </div>


 
et le javascript qui marche pour cacher, mais pas pour afficher ! :( :

Code :
  1. <script type="text/javascript">
  2.  function deroul_div(object) {
  3.   if(document.getElementById("div_aff" ).className="aff_div" ) {
  4.    document.getElementById("div_aff" ).className="cache_div"; }
  5.   else{document.getElementById("div_aff" ).className="aff_div";}
  6.  }
  7. </script>

Reply

Marsh Posté le 26-05-2005 à 11:58:07    

Citation :

if(document.getElementById("div_aff" ).className="aff_div" )


 
Ya pas comme un problème là? :gratgrat:


Message édité par masklinn le 26-05-2005 à 11:58:22

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 11:59:32    

Heu surement mais je vois pas lequel :(
 
:)

Reply

Marsh Posté le 26-05-2005 à 12:00:28    

bixibu a écrit :

Heu surement mais je vois pas lequel :(
 
:)


connais tu la différence entre "=" et "=="? [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 12:02:36    

Sacrebleu  !!!
 
Oui effectivement.. je suis impardonnable!
 
merci:!

Reply

Marsh Posté le 26-05-2005 à 13:46:52    

C'est encore moi, j'ai juste une petite question:
 
En javascript, comment faire pour recuperer l'id (le nom de l'id lui meme) ?
 
En fait, quand je clique sur le lien, la fonction appelé doit pouvoir recuperer le nom de l'ID (id="div_aff1" ), pour le traitement juste apres..
 
un  

Code :
  1. var_ID = this.id;


suffit il ?
merci

Reply

Marsh Posté le 26-05-2005 à 13:50:53    

[:petrus75]
 
Je t'ai filé le lien de Quirksmode pourtant [:johneh]
 
la méthode dédiée est this.getAttribute('id').


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 13:52:15    

merci ;)
 
l'anglais et moi, c'est pas l'amour fou :p

Reply

Marsh Posté le 26-05-2005 à 14:20:44    

Les problemes continuent  :o  
 
Mon script marchait pour un lien et sa div qui s'affichent/se cachent..
Mais maintenant je veut gerer plusieurs liens.. et donc plusieurs div differentes à afficher/cacher
 
deja mon code html :

Code :
  1. <a id="click_div1" href="#" onClick="deroul_div(this)">E2 : Dossiers en attente d'avis médical</a>
  2. <div class="cache_div" id="div_aff1">
  3. <p><ul class="enligne">
  4.  <li>PDURAN0003</li>
  5.  <li>Pierre Durand</li>
  6.  <li>Albert Durand</li>
  7. </ul></p>
  8. </div>
  9. <a id="click_div2" href="#" onClick="deroul_div(this)">E3 : Dossiers détruits</a>
  10. <div class="cache_div" id="div_aff2">
  11. <p><ul class="enligne">
  12.  <li>PDURAN0003</li>
  13.  <li>Pierre Durand</li>
  14.  <li>Albert Durand</li>
  15. </ul></p>
  16. </div>


 
javascript :

Code :
  1. <script type="text/javascript">
  2.  function deroul_div(object) {
  3.   var id_change  = this.getAttribute('id');  //je recupere l'id du lien sur lequel j'ai cliqué
  4.   var id2 = id_change.charAt(9);   //j'extrait le dernier caractere (n° du lien)
  5.   var id_final = "div_aff"+id2;    //je concatene div_aff et le numero du lien pour savoir quel div est à cacher ou à afficher
  6.   if(document.getElementById(id_final).className=="aff_div" ) {
  7.    document.getElementById(id_final).className="cache_div"; }
  8.   else{document.getElementById(id_final).className="aff_div";}
  9.  }
  10. </script>


 
Et apparement ya un probleme avec le this.getAttribute('id'), parce que j'ai une erreur me disant que "cette objet ne supporte pas cette methode ou propriete"
 
ps:allez je suis presque au bout :p, merci de votre aide


Message édité par bixibu le 26-05-2005 à 14:22:39
Reply

Marsh Posté le 26-05-2005 à 14:26:23    

bixibu a écrit :

javascript :

Code :
  1. <script type="text/javascript">
  2.  function deroul_div(object) {
  3.   var id_change  = this.getAttribute('id');  //je recupere l'id du lien sur lequel j'ai cliqué
  4.   var id2 = id_change.charAt(9);   //j'extrait le dernier caractere (n° du lien)
  5.   var id_final = "div_aff"+id2;    //je concatene div_aff et le numero du lien pour savoir quel div est à cacher ou à afficher
  6.   if(document.getElementById(id_final).className=="aff_div" ) {
  7.    document.getElementById(id_final).className="cache_div"; }
  8.   else{document.getElementById(id_final).className="aff_div";}
  9.  }
  10. </script>


 
Et apparement ya un probleme avec le this.getAttribute('id'), parce que j'ai une erreur me disant que "cette objet ne supporte pas cette methode ou propriete"
 
ps:allez je suis presque au bout :p, merci de votre aide


C'est normal :o
 
this = objet dont fait partie la fonction.
 
Ici, ce qui appelle/contient la fonction c'est pas ta balise (a) c'est la fonction onclick de la balise a, donc this == a.onclick :o  
 
T'as passé une référence à "a" en argument dans ta variable "objet", pourquoi tu l'utilise pas? [:cupra]


Message édité par masklinn le 26-05-2005 à 14:27:03

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 14:38:25    

Mais si this c'est a.onclick..
comment j'utilise "a" ?
 
var id_change  = a.getAttribute('id');
comme ca? non franchement je vois pas.. désolé ca c'est les bases de javascript mais j'apprend un peu à l'arrache :p

Reply

Marsh Posté le 26-05-2005 à 14:39:11    

le code s'en ressent d'ailleurs ^^;

Reply

Marsh Posté le 26-05-2005 à 14:40:02    

Ben non. Regarde ce que tu as fait :

function deroul_div(object) {


Et dans le code HTML :

onClick="deroul_div(this)


Donc le paramètre object représente le a :

var id_change  = object.getAttribute('id');

Reply

Marsh Posté le 26-05-2005 à 14:43:00    

bixibu a écrit :

Mais si this c'est a.onclick..
comment j'utilise "a" ?
 
var id_change  = a.getAttribute('id');
comme ca? non franchement je vois pas.. désolé ca c'est les bases de javascript mais j'apprend un peu à l'arrache :p


Tu lis ce que j'écris? [:johneh]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 14:43:16    

Ha ok ca m'avait echappé ca!
Ok je pense avoir compris le coup des object, this etc!
 
ps:mon code marche enfin !
 
Merci a tous.. enfin a tout a lheure ^^
 
edit: vui Masklinn je lit.. mais j'ai juste eu un peu de mal a me mettre dans le crane tout ce qui est passage de parametre entre html et javascript.. c'est bon now


Message édité par bixibu le 26-05-2005 à 14:44:44
Reply

Marsh Posté le 30-07-2005 à 19:56:47    

On peut aussi passer le nom du div dans la fonction
ça permet de mettre le script en header et de l utiliser pour plusieurs div
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Document sans nom</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. .aff_div {
  9.         display:block;
  10.         }
  11. .cache_div {
  12.         display :none;
  13.         }
  14. -->
  15. </style>
  17. <script language="JavaScript" type="text/JavaScript">
  18. function deroul_div(id_div) {
  19.  if(document.getElementById(id_div).className=='aff_div')
  20.    {document.getElementById(id_div).className='cache_div'}
  21.   else if(document.getElementById(id_div).className=='cache_div')
  22.    {document.getElementById(id_div).className='aff_div'}
  23. }
  24. </script>
  25. </head>
  27. <body>
  28. <div><a id="click_div" href="javascript:void(0)" onClick="deroul_div('sentmail')">Destinataires</a></div>
  29. <div class="cache_div" id="sentmail">machin@efefe.com - truc@azzda.fr</div>
  30. </body>
  31. </html>


 
+++


Message édité par mattdelavega le 30-07-2005 à 20:05:21
Reply

Marsh Posté le 30-07-2005 à 20:01:20    

mattdelavega a écrit :

<div><a id="click_div" href="javascript:void(0)" onClick="deroul_div('div1')">MENU 1</a></div>


MAI SAI SUPAIR §§§ [:dawa]


Message édité par masklinn le 30-07-2005 à 20:01:37

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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