TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 107655 visiteurs

 1 visiteur en ligne

Pour créer un accordéon vertical.

  • Mise en place
  • Code dans l'article
  • jqstyle.css

On peut créer un accordéon dans un article.

CRÉATION DE L'ACCORDÉON :

  1. Créer un article
  2. Copier les lignes qui sont dans ce fichier
  3. Aller dans  iconeSOURCE.png  de l'article
  4. Coller les lignes
  5. Cliquer à nouveau sur SOURCE pour sortir

ENREGISTRER

 

Si vous avez plus ou moins de 4 onglets : dans SOURCE, copier-coller ou supprimer les lignes correspondant à chaque image (remplacer [ par < ) :

[li>[a href="#">Titre 4[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 4[/div>

[/li>

[/ul>

[/li>

► Enregistrer l'article

ampoule.png

Pour éviter quelques désagréments dans la mise en forme du contenu, il est plus facile de le mettre dans un tableau.

EXPLICATION DU CODE

(la balise < a été remplacée par pour éviter l'activation du code)

[script type="text/javascript">

&#36;(document).ready( function() {

&#36;("#gyaccordion3").hoverAccordion({

keepHeight: false,

activateItem: 1,

onClickOnly: true,

speed: 400

});

&#36;("#gyaccordion3").children("li:first").addClass("firstitem");

&#36;("#gyaccordion3").children("li:last").addClass("lastitem");

});

[/script>

Script de l'accordéon

N'oubliez pas de modifier le numéro de l'ID !

Dans le dossier de la skin

Fichier jqstyle.css

#gyaccordion3

[div style="width:500px;margin:auto;">

[ul id="gyaccordion3" style="width:500px; margin:auto;">

Largeur de l'accordéon

[li>[a href="#">Titre 1[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 1[/div>

[/li>

[/ul>

[/li>

Titre sur lequel on clique pour l'ouvrir

Contenu (texte, image, tableau...)

Onglet 1

[li>[a href="#">Titre 2[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 2[/div>

[/li>

[/ul>

[/li>

Onglet 2

[li>[a href="#">Titre 3[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 3[/div>

[/li>

[/ul>

[/li>

Onglet 3

[li>[a href="#">Titre 4[/a>

[ul>

[li>

[div style="padding:6px;">Contenu 4[/div>

[/li>

[/ul>

[/li>

Onglet 4

[/ul>

[/div>

[div style="margin:8px;">[/div>

Fin du code pour l'accordéon

Le style est dans le fichier jqstyle.css dans le dossier de la skin.

Si vous avez plusieurs accordéons et que vous voulez leur donner des couleurs ou des tailles différentes :

  • Copier les lignes de ce fichier à la fin du fichier jqstyle.css (pour chaque accordéon si nécessaire)
  • Donner un numéro différent à #gyaccordion pour personnaliser chaque accordéon.

#gyaccordion3 {
    width: auto;
    height: auto;
    list-style-type: none;
    background-color: inherit;
    color: inherit;
}

Accordéon

N'oubliez pas de modifier le numéro !

#gyaccordion3 a {
    display: block;
    font-weight: bold;
    text-decoration: none;
}
Lien
#gyaccordion3 ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
Titre et contenu
#gyaccordion3 li {
    margin: auto;
    list-style-type: none;
    height:auto;
}
Titre de chaque onglet
#gyaccordion3 li a {
    width: auto;
    height: auto;
    padding: 4px;
    display: block;
    color: #FFF;
}
Lien de chaque titre
#gyaccordion3 li a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
    margin: 4px 0;
}
Lien fermé
#gyaccordion3 li.firstitem a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
}
Premier onglet quand il est fermé
#gyaccordion3 li.lastitem a.closed {
    color:#f2f2f2 !important;
    background-color: #404040;
    border: 0px solid #404040;
    border-radius: 8px;
}
Dernier onglet quand il est fermé

#gyaccordion3 li  li {
    max-width: 450px;
    height: auto;
    margin: auto;
    line-height: 15px;
    border: 0px solid #404040;
}

Contenu
#gyaccordion3 li a.opened {
    color: #fff;
    font-weight: bold;
    background-color: #821fe5;
    border: 0px solid #821fe5;
    margin: 4px 0;
    border-radius: 8px;
}
Onglet ouvert
#gyaccordion3 li.firstitem a.opened {
    color: #fff;
    font-weight: bold;
    background-color: #821fe5;
    border: 0px solid #821fe5;
    margin: 4px 0;
    border-radius: 8px;
}
Premier onglet quand il est ouvert
#gyaccordion3 li.lastitem li {
    margin: 4px 0 12px 0;
}
Dernier onglet
#gyaccordion3 li.lastitem ul {
    padding-bottom: 4px;
    margin: 0;
}
Dernier titre et contenu

Mots-clés associés

Date de création : 10/04/2013 21:46
Dernière modification : 13/04/2013 07:47
Page lue 5423 fois


Vous êtes ici :   Accueil » Accordéon vertical