.haccordion{
padding: 0;
width: 500px; */ Grandeur total que vous désiré une fois qu'ils sont utilisé */
}


.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*on touche pas*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*on touche pas*/
width: 100%; /*comme tu préfères c'est la hauteur*/
height: 20px; /*comme tu préfères c'est la longueur*/
overflow: hidden; /*on touche pas*/
float: left; /*on touche pas*/
}

#hc1 li{
margin:0 0px 0 0; /*espace entre chaque content*/
width: 200px;
}

#hc1 li .hpanel{
padding: 0px; /*espace entre chaque content*/
background: transparent;
}

.haccordion li .hpanel{
width: 20px; /*comme tu préfères c'est la hauteur*/
height: 20px; /*comme tu préfères c'est la longueur*/
}

#hc1 li{width: 50px;
height: 100px;
}
#hc1 li .hpanel{width: 150px;
height: 100px;
}

<!--Make sure your page contains a valid doctype at the very top-->

<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type="text/javascript">

haccordion.setup({
   accordionid: 'hc1', //main accordion div id
   paneldimensions: {peekw:'50px', fullw:'280px', h:'130px'},
   selectedli: [0, true], //[selectedli_index, persiststate_bool]
   collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
   accordionid: 'hc2', //main accordion div id
   paneldimensions: {peekw:'30px', fullw:'280px', h:'130px'},
   selectedli: [-1, true], //[selectedli_index, persiststate_bool]
   collapsecurrent: true //<- No comma following very last setting!
})

</script><div id="hc1" class="haccordion">
   <ul>

   <li>
      <div class="hpanel">
      <img src="http://img3.imageshack.us/img3/4577/59055453.png" style="float:left; padding-right:8px; width:100px; height:100px" /><font color=#4d3cba><b>Sam Winchester</b><br><div class="tstaff">Les Alpha</font>
      </div>
   </li>

   <li>
      <div class="hpanel">
      <img src="http://img.photobucket.com/albums/v418/emilie31/icon14jensen.jpg" style="float:left; padding-right:8px; width:100px; height:100px" /><font color=#4d3cba><b>Dean Winchester</b><br><div class="tstaff">Les Bêta</font>
      </div>
   </li>

   <li>
      <div class="hpanel">
      <img src="http://i68.servimg.com/u/f68/12/08/59/83/kriste22.jpg" style="float:left; padding-right:8px; width:100px; height:100px" /><font color=#4d3cba><b>Eileen Cullen</b><br><div class="tstaff">Les Kappa</font>
      </div>
   </li>

   <li>
      <div class="hpanel">
      <img src="http://img43.imageshack.us/img43/1429/45844569.png" style="float:left; padding-right:8px; width:100px; height:100px" /><font color=#4d3cba><b>Megara Olson</b><br><div class="tstaff">Les sigma</font>
      </div>
   </li>

haccordion.setup({
  accordionid: 'hc2', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'280px', h:'130px'},
  selectedli: [-1, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: true //<- No comma following very last setting!
})