PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT]

Code:

<div id="accueil">
    <div class="page" id="page1">
        <table class="contenu_page">
            <tr>
                <td class="titre" style="width: 400px !important; overflow: hidden;">
                   <span class="page_titre">Titre page 1</span>
                </td>
                <td>
                    <div class="contenu">
                       Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="page" id="page2">
        <table class="contenu_page">
            <tr>
                <td class="titre" style="width: 40px; overflow: hidden;">
                   <span class="page_titre">Titre page 2</span>
                </td>
                <td>
                    <div class="contenu">
                       Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="page" id="page3">
        <table class="contenu_page">
            <tr>
                <td class="titre" style="width: 40px; overflow: hidden;">
                   <span class="page_titre">Titre page 3</span>
                </td>
                <td>
                    <div class="contenu">
                       Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="page" id="page4">
        <table class="contenu_page">
            <tr>
                <td class="titre" style="width: 40px; overflow: hidden;">
                   <span class="page_titre">Titre page 4</span>
                </td>
                <td>
                    <div class="contenu">
                       Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="page" id="page5">
        <table class="contenu_page">
            <tr>
                <td class="titre" style="width: 40px; overflow: hidden;">
                   <span class="page_titre">Titre page 5</span>
                </td>
                <td>
                    <div class="contenu">
                       Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
<span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Code:

#accueil
{
   width: 900px;
   height: 400px;
   overflow: hidden;
   background: url(http://img11.hostingpics.net/pics/181185imagedefond.jpg) center no-repeat;
   border: 3px solid #272727;
}
#page1
{
   width: 40px;
   height: 400px;
   float: left;
   overflow: hidden;
   background-color: #555555;
}

#page2
{
   width: 40px;
   height: 400px;
   float: left;
   overflow: hidden;
   background-color: #777777;
}

#page3
{
   width: 40px;
   height: 400px;
   float: left;
   overflow: hidden;
   background-color: #9b9b9b;
}

#page4
{
   width: 40px;
   height: 400px;
   float: left;
   overflow: hidden;
   background-color: #bababa;
}

#page5
{
   width: 40px;
   height: 400px;
   float: left;
   overflow: hidden;
   background-color: #dcdcdc;
}

.current
{
   width: 82% !important;
   height: 400px !important;
}

.contenu_page
{
   width: 100%;
   height: 400px;
}

.page_titre
{
   display: inline-block;
   height: 40px;
   width: 400px;
   margin-left: -180px;
   color: #ffffff;
   text-align: center;
   font-size: 24px;
   font-family: arial black;
   letter-spacing: 2px;
   text-shadow: 1px 1px 0px #5f5f5f;
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

.page_titre:hover
{
   cursor: pointer;
}

.contenu
{
   width: 670px;
   height: 380px;
   margin-left: -180px;
   overflow: none;
   background-color: white;
   overflow: hidden;
   padding: 6px;
}

.credit
{
   display: block;
   text-align: right;
   margin-right: 20px;
}
.credit a
{
   font-size: 10px;
   text-decoration: none !important;
}

Code:

// Code par Glycérine [Never-Utopia]
$("#accueil .page .contenu").hide();

$("#accueil .page .current").parent().find(".contenu").fadeIn("slow", "linear");
   
$("#accueil .page .page_titre").click(
   function ()
   {
      //$(this).parent().parent().parent().parent().parent().siblings().find(".contenu").fadeToggle("slow");
      
      if($(this).parent().parent().parent().parent().parent().hasClass("current"))
      {
         $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () {
             $("#accueil div.page").removeClass("current");
           });
      }
      else
      {
         $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () {
             $("#accueil div.page").removeClass("current");
            $(this).parent().parent().parent().parent().parent().toggleClass("current");
           });
         
         
         
         
      }
         $(this).parent().parent().parent().parent().parent().find(".contenu").fadeIn("slow");
      return false;
   }
);

Code:

<script type="text/javascript" src="xxx"></script>

Je vais citer Sparrow pour ce qui est des crédits de Never-Utopia

Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser