QEEL numero 1

       function changeOnglet(_this){
            var getOnglets    = document.getElementById('my_onglets').getElementsByTagName('span');
            for(var i = 0; i < getOnglets.length; i++){
                if(getOnglets[i].id){
                    if(getOnglets[i].id == _this.id){
                        getOnglets[i].className = 'my_onglet_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getOnglets[i].className = 'my_onglet';
                        document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                    }
                }
            }    
        }

       <!-- BEGIN disable_viewonline -->
        <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
        
        <td width="90%" align="center" valign="middle">
        <table><tr>
        <td style="padding-bottom: 4px;" align="center" id="my_onglets" valign="middle">
        <span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
        <span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
        <span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
        <span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
        <span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
        <span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
        <span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
        </td></tr></table>
        </td></tr>
        
        <tr><td width="90%" align="center" valign="middle">
        <table class="myqeel" align="center"><tr>
        
        <td class="wiostats" align="center" valign="middle">
        <table><tr><td align="justify" valign="top" class="gensmall">
        {TOTAL_POSTS}<br />
        {TOTAL_USERS}<br />
        {NEWEST_USER}
        </td></tr>
        <tr><td align="left" valign="top" class="gensmall">
        {TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}<br />
        <br />
        {LOGGED_IN_USER_LIST}
        </td></tr></table>
        </td>
        
        <td align="center" valign="middle" class="defgroups">
        <div id="my_contenus">
        <div id="co_17" class="my_contenu">CONTENU GR 1<br />
        Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
        A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
        'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
        aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
        Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
        A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
        'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
        aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
        Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
        A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
        'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
        aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div>
        <div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
        <div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
        <div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
        <div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
        <div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
        <div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
        </div>
        </td>
        
        <td class="wwh" align="center" valign="middle">
        <table><tr><td align="left" valign="top">
        {L_CONNECTED_MEMBERS}
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
        </td></tr></table>
        </td>
        
        </tr></table>
        
        </td></tr></table>
        
           <!-- BEGIN switch_chatbox_activate -->
        <table class="forumline" width="90%" border="0" cellspacing="1" cellpadding="0">
           <tr>
              <td class="row1">
                 <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                    <!-- BEGIN switch_chatbox_popup -->
                    <div id="chatbox_popup"></div>
                    <script type="text/javascript">
                    //<![CDATA[
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                    //]]>
                    </script>
                    <!-- END switch_chatbox_popup -->
                 </span>
              </td>
           </tr>
           <!-- END switch_chatbox_activate -->
        </table>
        <!-- END disable_viewonline -->

/*- tableaux groupes
---------------------------*/
.myqeel {
width: auto;
margin: 0 auto;
}
.my_onglet {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: transparent;
border: none;
cursor: pointer;
}
.my_onglet:hover {
background: #b8efa1;
}
.my_onglet_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: transparent;
border: none;
}
.my_contenu {
width: 250px;
height: 180px;
overflow-y: auto; /* y pour scrollbar en hauteur automatique dès que la hauteur définie est dépassée */
color: #000;
font-size: 11px;
text-align: justify;
line-height: normal;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 4px;
}
/* who is on line et stats */
.wiostats {
width: 250px;
padding: 7px;
margin: 0 auto;
}
/* who was here */
.wwh {
width: 250px;
padding: 7px;
margin: 0 auto;
}