Installation du script

Rendez vous sur votre panneau d'administration, dans l'onglet modules puis dans "gestion des codes javascript" :

1) Créez un nouveau code javascript du nom de Plugin Kwicks en y collant le code contenu sur la page suivante : ICI (Si jamais il n'y était plus, vérifiez à cette adresse et récupérez le javascript compressé (packed).

2) Créez un autre code javascript intitué initiation accordéon et indiquez le code suivant :

Code:

$().ready(function() { 
    $('.kwicks').kwicks({ 
        max : 205, 
        spacing : 3, 
        isVertical : true 
    }); 
});

Vous pouvez le personnaliser :
max = La valeur "maximale" d'un panneau quand il est survolé, vous pouvez remplacer par min pour avoir la valeur minimale (sans survol)
spacing = l'espacement entre deux blocs

Si vous souhaitez que les blocs se déplient au clic, utilisez plutôt le code suivant :

Code:

$().ready(function() { 
    $('.kwicks').kwicks({ 
        max : 205, 
        spacing : 3, 
        isVertical : true,
      sticky : true, 
        event : 'click'       
    }); 
});

Installation du CSS

Pour installer le CSS, c'est très simple, placez le code ci-dessous dans votre Feuille de Style :

Code:

.kwicks {
   list-style: none;
   position: relative;
   margin: 0;
   padding: 0;
}
.kwicks li{
   display: block;
   overflow: hidden;
   padding: 0;
   cursor: pointer;
}

.kwicks li{ 
    width: 125px; 
    height: 100px; 
    margin-bottom: 3px; 
} 
#kwick1 { 
    background-color: #FF5100; 
} 
#kwick2 { 
    background-color: #B33900; 
} 
#kwick3 { 
    background-color: #FFD000; 
} 
#kwick4 { 
    background-color: #B39200; 
    margin-bottom: none; 
}

Voilà, terminé avec le CSS !

Le code HTML

Pour le code HTML, c'est très simple, je vais vous expliquer :

Code:

<ul class="kwicks" > 
    <li id="kwick1">CONTENU PREMIER PANNEAU</li> 
    <li id="kwick2">CONTENU DEUXIEME PANNEAU</li> 
    <li id="kwick3">CONTENU TROISIEME PANNEAU</li> 
    <li id="kwick4">CONTENU QUATRIEME PANNEAU</li> 
</ul>

On utilise une liste HTML pour afficher l'accordéon. Pour rajouter un volet (panneau), il faut rajouter une ligne avant < / ul > de ce genre (en modifiant la valeur numérique pour chaque ligne ajoutée) :

Code:

<li id="kwick5">CONTENU DU PANNEAU 5</li>

Et bien évidemment, il faut rajouter une propriété CSS #kwick5 pour personnaliser ce panneau si besoin est !
A l'intérieur des balises li, vous devrez mettre le contenu de l'accordéon!

Le Tutoriel est désormais terminé! J'espère que vous avez tout compris