Bonjour, j'ai une page php membre.php : cette page me liste tous les membres de ma base de données.
exemple de ma page :
<div class="member1-header"> Nom du membre </div>
<div class="member1-content"> Informations sur le membre (age, sex ....) </div>
<div class="member1-header"> Nom du membre2 </div>
<div class="member1-content"> Informations sur le membre2 (age, sex ....) </div>
 
Avec un petit script javascript, lorsque je clique sur une div dont la class fini par -header, cela m'ouvre la class -content associé.
 
Ça marche plutôt bien, le seul problème c'est que lorsque ma page se charge, durant quelques secondes on voit toute la page et ensuite les div dont la class fini par -content sont cachées.
Comment évité que l'utilisateur voit la page entiere se charger et ensuite se refermer ? Y a t-il un moyen pour que la page s'affiche directement sous la bonne forme (les div -content fermées) ??

En ajoutant cette ligne dans ton css ça devrait fonctionner
 
div[class $= "-content"] { display : none;}

Fait voir surtout la gueule du javascript

Voici le code javascript utilisé dans mon site :
 
/*
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);}
  if(h.substr(h.indexOf('-')+1,h.length)=='truccontent'){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();}
}

J'voulais dire : le JavaScript où t'appelles ces fonctions ?
 
Genre si tu le fais dans un onload ou ailleurs

Ok, excuse moi;
 
Je fais comme cela :
 
<?php
  $page = $_GET['page'];
  if (($page == "modif_pres_francas" ) OR ($page == "menudock" )) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight');";
   
  if ($page == "Admin_member_add" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight');  new Accordian('Admin_member_basic-accordian',5,'Admin_member_header_highlight');";
  if ($page == "Admin_member_modify" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight');  new Accordian('Admin_member_mod_basic-accordian',5,'Admin_member_mod_header_highlight');";
 ?>  
 <body onload="<?php echo $load; ?>">
 
Donc oui c'est fait dans le onLoad.

Ouais ben voilà Du coup ça n'est exécuté que lorsque tout est chargé.
 
Il faut l'exécuter dans le domready, ce qui est rigolo à faire crossbrowser. Ne te fait pas chier avec un script pourri, utilise un truc genre jQuery + jQuery UI qui te permettent de gérer les tabs de manière très facile, y compris le chargement dans un dom ready

Donc ce que tu me conseillerais de faire c'est un truc du genre :
$(document).ready(function () {
     
    news Accordian(....);
});
??
 
En ayant chargé dans ma page jquery.js et accordion.js ?

Yeah

J'ai essayé en faisant :
 <head>
  <title> Francas 64 </title>
  <link rel="stylesheet" href="style.css"/>  
  <script type="text/javascript" src="javascript/jquery.js"></script>
  <script type="text/javascript" src="javascript/accordian-src.js"></script>
 </head>    
 <script type="text/javascript">
  <?php
   $page = $_GET['page'];
   if (($page == "news" ) OR ($page == "loginFail" ) OR ($page == "loginSuccess" ) OR ($page == "logout" ) OR ($page == "events" ) OR ($page == "activityCard" )) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight');";
   if ($page == "auterrive" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight'); new Accordian('auterrive_basic-accordian',5,'auterrive_header_highlight');";
   if ($page == "formation" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight'); new Accordian('formation_basic-accordian',5,'formation_header_highlight');";
   if ($page == "about" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight'); new Accordian('about_basic-accordian',5,'about_header_highlight');";
   if ($page == "activityCardDetail" ) $load="new Accordian('menu_basic-accordian',5,'menu_header_highlight'); new Accordian('activity_basic-accordian',5,'activity_accordion_highlight');";
  ?>  
  $(document).ready(function () {
  <?php echo $load; ?>
  alert("t" );
  });  
 </script>
 <body>
 
 
Cependant tous le javascript est désactivé et l'alert n'est meme pas exécuter :s

Utilise Firefox + l'extension Firebug pour voir clairement les erreurs javascript

Module pour firefox installé;

Erreur concernant ce que l'on parle : $(document) is null

En cherchant, cela signifie que le jquery n'est pas chargé !?
j'ai pourtant : <script type="text/javascript" src="javascript/jquery.js"></script>

je ne comprend pas.

Hmmm pas normal, ça devrait fonctionner pourtant. Déclare ton script correctement dans le head ?