Accordéon

[Invité]

Bonsoir!
Voila j'ai quelques petits soucis avec la réalisation d'un accordéon. J'ai trouvé un site qui me donne les ressources nécessaire pour le réaliser mais il ne donne pas vraiment d'explication!
le voici http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/
Il vous fait télécharger un fichier zip avec toutes les données nécessaire mais je n'arrive pas à m'y retrouver :/. J'aimerais réaliser celui qu'il appelle "left navigation" dans le fichier téléchargé. J'ai essayé par moi même d'obtenir ce resultat, malheureusement je ne comprend pas pourquoi, j'obtiens ceci :

Spoiler:

Si quelqu'un pouvait me donner un petit coup de main ce ne serait pas de refus!

Merci beaucoup & Bonne soirée!
Natsuo.

[Invité]

Up, S'il vous plait.

[Invité]

Up...S'il vous plait. Ça concerne le script, je suis sur que l'un deux ne marchent pas ou je ne sais pas vu que mon accordéon ne s'active pas...un peu d'aide..merci.

[Invité]

Up.

[Invité]

Up. o/

[Invité]

Up. o/

[tupac]

Bonjour Natsuo

Tout d'abord il vous faut héberger le fichier JS chez un hébergeur tel que Archive-Host ou le votre si vous en avez un.

JS a héberger.

Code:

/*
DezinerFolio.com Simple Accordians.

Author  : G.S.Navin Raj Kumar
Website : http://dezinerfolio.com

*/

/*
* The Variable names have been compressed to achive a higher level of compression.
*/

// Prototype Method to get the element based on ID
function $(d){
   return document.getElementById(d);
}

// set or get the current display style of the div
function dsp(d,v){
   if(v==undefined){
      return d.style.display;
   }else{
      d.style.display=v;
   }
}

// set or get the height of a div.
function sh(d,v){
   // if you are getting the height then display must be block to return the absolute height
   if(v==undefined){
      if(dsp(d)!='none'&& dsp(d)!=''){
         return d.offsetHeight;
      }
      viz = d.style.visibility;
      d.style.visibility = 'hidden';
      o = dsp(d);
      dsp(d,'block');
      r = parseInt(d.offsetHeight);
      dsp(d,o);
      d.style.visibility = viz;
      return r;
   }else{
      d.style.height=v;
   }
}
/*
* Variable 'S' defines the speed of the accordian
* Variable 'T' defines the refresh rate of the accordian
*/
s=7;
t=10;

//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially.
function ct(d){
   d = $(d);
   if(sh(d)>0){
      v = Math.round(sh(d)/d.s);
      v = (v<1) ? 1 :v ;
      v = (sh(d)-v);
      sh(d,v+'px');
      d.style.opacity = (v/d.maxh);
      d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
   }else{
      sh(d,0);
      dsp(d,'none');
      clearInterval(d.t);
   }
}

//Expand Timer is triggered as a setInterval to increase the height of the div exponentially.
function et(d){
   d = $(d);
   if(sh(d)<d.maxh){
      v = Math.round((d.maxh-sh(d))/d.s);
      v = (v<1) ? 1 :v ;
      v = (sh(d)+v);
      sh(d,v+'px');
      d.style.opacity = (v/d.maxh);
      d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
   }else{
      sh(d,d.maxh);
      clearInterval(d.t);
   }
}

// Collapse Initializer
function cl(d){
   if(dsp(d)=='block'){
      clearInterval(d.t);
      d.t=setInterval('ct("'+d.id+'")',t);
   }
}

//Expand Initializer
function ex(d){
   if(dsp(d)=='none'){
      dsp(d,'block');
      d.style.height='0px';
      clearInterval(d.t);
      d.t=setInterval('et("'+d.id+'")',t);
   }
}

// Removes Classname from the given div.
function cc(n,v){
   s=n.className.split(/\s+/);
   for(p=0;p<s.length;p++){
      if(s[p]==v+n.tc){
         s.splice(p,1);
         n.className=s.join(' ');
         break;
      }
   }
}
//Accordian Initializer
function Accordian(d,s,tc){
   // get all the elements that have id as content
   l=$(d).getElementsByTagName('div');
   c=[];
   for(i=0;i<l.length;i++){
      h=l[i].id;
      if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);}
   }
   sel=null;
   //then search through headers
   for(i=0;i<l.length;i++){
      h=l[i].id;
      if(h.substr(h.indexOf('-')+1,h.length)=='header'){
         d=$(h.substr(0,h.indexOf('-'))+'-content');
         d.style.display='none';
         d.style.overflow='hidden';
         d.maxh =sh(d);
         d.s=(s==undefined)? 7 : s;
         h=$(h);
         h.tc=tc;
         h.c=c;
         // set the onclick function for each header.
         h.onclick = function(){
            for(i=0;i<this.c.length;i++){
               cn=this.c[i];
               n=cn.substr(0,cn.indexOf('-'));
               if((n+'-header')==this.id){
                  ex($(n+'-content'));
                  n=$(n+'-header');
                  cc(n,'__');
                  n.className=n.className+' '+n.tc;
               }else{
                  cl($(n+'-content'));
                  cc($(n+'-header'),'');
               }
            }
         }
         if(h.className.match(/selected+/)!=undefined){ sel=h;}
      }
   }
   if(sel!=undefined){sel.onclick();}
}

Une fois le fichier hébergé prenez le lien principal et placez-le dans le script ci-dessous ce script devra être placé dans la page d'accueil.

Code:

<script type="text/javascript" src=" lien principal du fichier JS ici "></script>

Ensuite placer ce code dans votre page d'accueil avec le script ci-dessus avec le lien principal a l'intérieur bien sur.

Code:

      <body onload="new Accordian('basic-accordian',5,'header_highlight');">
          <div id="basic-accordian" >
                <div style="width:125px; float:left">

  <div id="test1-header" class="accordion_headings header_highlight" >Home</div>
  <div id="test2-header" class="accordion_headings" >About Us</div>
  <div id="test3-header" class="accordion_headings" >Download</div>
</div>

  <div style="float:right; width:250px;">

      <div id="test1-content">
       <div class="accordion_child">
       Welcome to the Homepage<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
 
      <div id="test2-content">
     <div class="accordion_child">
       Here you will find more about us<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
 
      <div id="test3-content">
     <div class="accordion_child">
       and... this is the download section<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
</div>

et pour finir le css a placer dans votre feuille de style.

Code:

#basic-accordian{
   padding:5px;
   width:375px;
   position:absolute;
   z-index:2;
}

.accordion_headings{
   padding:5px;
   background:#99CC00;
   color:#FFFFFF;
   border:1px solid #FFF;
   cursor:pointer;
   font-weight:bold;
}

.accordion_headings:hover{
   background:#00CCFF;
}

.accordion_child{
   padding:15px;
   background:#EEE;
}

.header_highlight{
   background:#00CCFF;
}

[Invité]

Bonjour! merci de m'apporter votre aide !
Et bien j'ai fait comme vous l'avez indiqué, j'ai mis tout au bon endroit et heberger mon fichier accordian-src ce qui me donne un lien comme ça http://www.toofiles.com/fr/oip/documents/js/accordian-src.html sur toofiles car il faut donner toutes ses infos sur archive host je n'aime pas trop..
Le petit hic, c'est que ça ne marche toujours pas, cela viendrait de l'hebergeur? si oui vous me conseillé quoi? :/

EDIT: Finalement, je viens de le mettre malgré tout sur archive host je me susi decidé x) et tout marche tres bien! Par contre j'aimerais bien vous poser une derniere question sinon je me debrouillerais bien mais, savez vous ce que je dois modifer pour que l'onglet qui s'affiche quand on clique sur home reste afficher même apres avoir actualisé la page? car à chaque fois il se referme, ce que je ne veux pas :/

Merci pour votre aide.

[tupac]

Bonjour Natsuo

Remplacer votre fichier JS hébergé chez Archive-Host par celui-la et remplacer l'ancien lien principal dans le script par le nouveau.

Code:

//by dezinerfolio.com
eval((function(){a=" {3document5ByIdOgvv=8E!&&E!K32}o=E;E;v=parseInt(2E=o;3vdheight=vHpx}Oofvgvv=v/d.h;dDv;dfilterKalpha(D+v*100H)Obz>0z#-1:z-v90E;%eE;z<x(x-z)#+1:v+z9x%Accordians,fl=5sByTagName(diva=[]d=S;QQ,Q)=={a.push}}xL((hc=h0,hc6==hcMc+;c;coverflowKhidden;c.h=g(cc.s=(s=8)?7:s;h.f=f;h.c=a;h.match4fHH))x=h}hC=(Rj=0;j<F.c;j++n=F.c[j];n=n0,ndMn6nMn+;s=dJt4

sH)Rp=0;p<s;p++s[p]=KGsJce(p,1d=s.join( break}}clearn.tQ==FPg(n,0@ed+K GP@b}}}}})(S)}x!LxC()}}",b=49;while(b>=0)a=a.replace(new RegExp("
#%2345689@CDEFGHJKLMOPQRS".charAt(b),"g"),("\\
\042
\044
.style.display
function
Interval(
.className
.length
.indexOf(-)
(d)
if(
-content)
.id
){
.style.
=none
{d=;z=g;x=d.h;
(d,
;for(i=0;i<l;i++
);
}else{
('+n+')',9)}
.substr(
=block
v=Math.round(
/d.sv=(v<1)?z
cleard.t)}}
d.offsetHeight
return
(new RegExp(
.getElement
+-header
=undefined
;ofv)g
n.t=set'
.onclick
opacity=
d
this
+d.f
+
.spli
=
=null
=(
}
n=
d
for(
l[i]".split("
"))[b--]);return a})())

[Invité]

Merci beaucoup! tout fonctionne! Desolé du retard j'ai eu un contre temps en faim de semaine.

Merci encore pour l'aide que vous m'avez apporté.