Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2835 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1097603
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 09:38:50  profilanswer
 

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

mood
Publicité
Posté le 26-05-2005 à 09:38:50  profilanswer
 

n°1097606
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 09:43:00  profilanswer
 

é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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1097609
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 09:45:14  profilanswer
 

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

n°1097610
Hermes le ​Messager
Breton Quiétiste
Posté le 26-05-2005 à 09:45:30  profilanswer
 

+1


---------------
Expert en expertises
n°1097616
afbilou
pouet your life
Posté le 26-05-2005 à 09:48:58  profilanswer
 

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

n°1097621
Hermes le ​Messager
Breton Quiétiste
Posté le 26-05-2005 à 09:53:59  profilanswer
 

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
n°1097661
cerel
Posté le 26-05-2005 à 10:25:26  profilanswer
 

Hermes le Messager a écrit :

passera pas sous IE. :o


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

n°1097663
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 10:26:02  profilanswer
 

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
n°1097671
plainsofpa​in
Pingouino's lover
Posté le 26-05-2005 à 10:31:57  profilanswer
 

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
n°1097683
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 10:38:45  profilanswer
 

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
 

mood
Publicité
Posté le 26-05-2005 à 10:38:45  profilanswer
 

n°1097739
FlorentG
Posté le 26-05-2005 à 11:12:48  profilanswer
 

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.

n°1097754
afbilou
pouet your life
Posté le 26-05-2005 à 11:23:39  profilanswer
 

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>

n°1097755
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 11:25:51  profilanswer
 

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:

n°1097810
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 11:47:48  profilanswer
 

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>

n°1097823
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 11:58:07  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1097826
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 11:59:32  profilanswer
 

Heu surement mais je vois pas lequel :(
 
:)

n°1097828
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 12:00:28  profilanswer
 

bixibu a écrit :

Heu surement mais je vois pas lequel :(
 
:)


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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1097833
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 12:02:36  profilanswer
 

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

n°1097953
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 13:46:52  profilanswer
 

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

n°1097958
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 13:50:53  profilanswer
 

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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1097961
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 13:52:15  profilanswer
 

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

n°1098033
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 14:20:44  profilanswer
 

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
n°1098049
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 14:26:23  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1098086
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 14:38:25  profilanswer
 

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

n°1098093
afbilou
pouet your life
Posté le 26-05-2005 à 14:39:11  profilanswer
 

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

n°1098098
FlorentG
Posté le 26-05-2005 à 14:40:02  profilanswer
 

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');

n°1098113
masklinn
í dag viðrar vel til loftárása
Posté le 26-05-2005 à 14:43:00  profilanswer
 

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]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1098115
bixibu
Ca ... c'est fait!
Posté le 26-05-2005 à 14:43:16  profilanswer
 

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
n°1165705
mattdelave​ga
Posté le 30-07-2005 à 19:56:47  profilanswer
 

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
n°1165709
masklinn
í dag viðrar vel til loftárása
Posté le 30-07-2005 à 20:01:20  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Assigner plusieurs actions à la suite à un boutonBouton d'action et lancement de macro avec arguments
[Javascript] Modifier du texte en cliquant une checkbox[css] display:none à block en cliquant sur lien sans JS
pb requete simpleBouton connexion (évenement)
Simple Standards-based SlideShow SystemBouton annuler UserForm
Bouton radio et champ et select[css] creer 2 colonnes (probleme tres simple)
Plus de sujets relatifs à : [css/jvs]Derouler un div en cliquant un simple bouton

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.092 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)