$(function(){
 
var t;
 
/* liste des onglets avec les catégories en faisant partie*/
  var onglets=  [
                          ["La Préface",[0]],
                          ["L'Annuaire ",[1]],
                          ["Coin Détente",[2]]];
 

var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 

var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
/* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
/* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
/* entoure les catégories d'un <div class="cat-table" /> */
  $("td.fondcat").closest("table").wrap('<div class="cat-table" />');
 
/* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
/* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
/* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
/* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);  
    if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});

/****************************CATEGORIE by Sarah***************************/
    .fondcat{
background: url('http://img15.hostingpics.net/pics/779503deo.png');
height: 100px;
width: 750px;
  text-align: center;
 background-repeat:no-repeat;
}
 
.fondfo{ background: #e5dbc5;
}
 
.cadcol{
  border: 1px solid #dad3c0;
  background: #dad3c0;
  border-radius: 20px;
  padding: 5px; margin: 5px;
  height: 110px;
  
  overflow-y: auto;
}a.forumlink{
  display: block;
  text-align: center;
}
 
/*onglets catégories*/
#cat-onglets {
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 150px;
  position: absolute;
  bottom: auto;
  left: 20px;
  display: block;
}
a.forumlink{
  display: block;
  text-align: center;
}
/*onglets catégories*/
#cat-onglets {
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 150px;
  position: absolute;
  bottom: auto;
  left: 20px;
  display: block;
}
 
.co-item {
  background: #dbd6c5;
  color: #7E9183;
  border: 1px solid  #7E9183;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
.co-item:hover{
  background: #CAC5B5;
  border: 1px solid 000;
  color:#7E9183;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #e3dcc3;
  color: #7E9183;
  border:1px solid #7E9183; }
/*****************************FIN*****************************/

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
      <td colspan="3" class="fondcat" nowrap="nowrap" width="100%"> {catrow.tablehead.L_FORUM} </td>
</tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"></td>
      <!-- END inc -->
 
    <td class="fondfo" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <div class="cadcol"><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
    
                        </span></div>
      </td>
          
      <td class="fondfo" align="center" valign="top" height="50">
                  <div style="width:150px;">
                  <div class="cadcol">
                    <span class="gensmall">{catrow.forumrow.TOPICS}sujets et {catrow.forumrow.POSTS} messages <br /><br />
                      {catrow.forumrow.LAST_POST}</span><br /><br />
                  </div>
                  <div style="margin-top:-40px;" align="center">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div><br /></div>
      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><!-- END tablefoot --><!-- END catrow --><img src="http://img15.hostingpics.net/pics/611863Decor.png" alt="" height="100px" width="848px" /><br />