En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » CSS Textes en accordéon
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

CSS Textes en accordéon

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Des solutions de textes en "accordéon" uniquement en CSS

Les propositions ci-dessous sont issues de ce site : (auteur : Mary Lou)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et d'adapter les propositions pour un article, une boite libre de GuppY ou un autre CMS, bien sûr. Elles sont "responsive design".

Bien sûr une solution existe déjà dans GuppY, mais qui utilise JQuery. Toutes sont compatibles entre elles et permettent d'avoir d'autres choix éventuels. Ces présentes solutions sont très simples à mettre en oeuvre, et il sera possible, en les appliquant telles que décrites ci-dessous, d'avoir des réglages de style différents dans des articles différents (ce qui n'est pas possible -simplement- avec la solution native de GuppY).

Deux solutions sont décrites ci-dessous. La première présente ses boites fermées, et elles peuvent toutes être ouvertes. La seconde présente une boite ouverte et l'ouverture d'une autre boite ferme la première. La hauteur s'adapte au contenu. [Les textes sont obtenus aléatoirement sur ce site.]

=== >> EXEMPLE 1 << ===

Songeons que l'homme a jeté un sort. Appâté par des rumeurs qui courent en la ville de son royaume ? Remets ton couteau dans son étui, dit la dame. Depuis six mois qu'il fait parler, et accepte enfin, avant qu'il ait les yeux bandés comme un mendiant ou un prisonnier.

Fatigué de la comtesse il y avait si peu de place dans la demi-lune par le fait de vos parents. Ajoutons que, elle s'introduisit seule par la brèche. Descendre, c'est propre de venir faire avec lui une conversation longue et sérieuse.

Respirant à fond pour maintenir la propriété de tous, les yeux secs. Poursuivant sa quête du trésor, on disait de lui que cette visite était obligée.

Cruellement... Pas le moindre bruit. Dites-leur que les intérêts en jeu sont colossaux. Puissance magique qu'on éteint, il invitait toutes ces demoiselles, très pâles. Replacés dans l'évolution de la vie, il l'accueillait avec tendresse. Cela lui irait très bien aujourd'hui qu'il l'a trouvé dans les fresques de la chapelle ardente, dont les opinions me semblent devoir être préférées à celles des autres. Aurais-je la chance de pouvoir utiliser la chaloupe.

Imprudemment, oui, répondit la mère qui en fut éblouie. Restez assis, monsieur : c'est à peine sensible. Comme tremblant aux haleines de la foule furieuse, c'est exactement ce qui s'attache à sa commune. Tu étais le seul qui m'aies deviné : tu as eu un boulot. Donnez-les-moi, je vais tabler sur la bonne voie : il faut dire que je vous rencontre sur le palier. La double ligne de maisons ne continua plus.

Que dire de la compagnie ? Que ses expériences ont fait faire un jardin d'un pas trébuchant ; appuyé sur son bureau, il n'était pas plus agité pendant la délibération de son arrêt, toutefois limité.

=== >> EXEMPLE 2 << ===

Songeons que l'homme a jeté un sort. Appâté par des rumeurs qui courent en la ville de son royaume ? Remets ton couteau dans son étui, dit la dame. Depuis six mois qu'il fait parler, et accepte enfin, avant qu'il ait les yeux bandés comme un mendiant ou un prisonnier.

Fatigué de la comtesse il y avait si peu de place dans la demi-lune par le fait de vos parents. Ajoutons que, elle s'introduisit seule par la brèche. Descendre, c'est propre de venir faire avec lui une conversation longue et sérieuse.

Respirant à fond pour maintenir la propriété de tous, les yeux secs. Poursuivant sa quête du trésor, on disait de lui que cette visite était obligée.

Cruellement... Pas le moindre bruit. Dites-leur que les intérêts en jeu sont colossaux. Puissance magique qu'on éteint, il invitait toutes ces demoiselles, très pâles. Replacés dans l'évolution de la vie, il l'accueillait avec tendresse. Cela lui irait très bien aujourd'hui qu'il l'a trouvé dans les fresques de la chapelle ardente, dont les opinions me semblent devoir être préférées à celles des autres. Aurais-je la chance de pouvoir utiliser la chaloupe.

Imprudemment, oui, répondit la mère qui en fut éblouie. Restez assis, monsieur : c'est à peine sensible. Comme tremblant aux haleines de la foule furieuse, c'est exactement ce qui s'attache à sa commune. Tu étais le seul qui m'aies deviné : tu as eu un boulot. Donnez-les-moi, je vais tabler sur la bonne voie : il faut dire que je vous rencontre sur le palier. La double ligne de maisons ne continua plus.

Que dire de la compagnie ? Que ses expériences ont fait faire un jardin d'un pas trébuchant ; appuyé sur son bureau, il n'était pas plus agité pendant la délibération de son arrêt, toutefois limité.

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style est obligatoire (c'est le même pour les deux exemples), au début du code source de l'article ou de la boite libre, ou dans styleplus.css.
Adapter à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les textes, insérez le code correspondant à chaque exemple en adaptant les contenus, bien sûr. Les parties surlignées en blanc seront à adapter à vos souhaits et votre configuration, notamment au niveau du chemin des flèches (gene_1 ou autres... natives dans GuppY).

  • Style
  • Code simplifié du corps de l'article : exemple 1
  • Code simplifié du corps de l'article : exemple 2

Style

<style type="text/css">
.ac-container{ /*attributs du conteneur*/
    width: 100%; /*largeur du conteneur*/
    margin: 10px auto 30px; /*marges extérieures H DG B*/
    text-align: left; /*alignement texte gauche*/
}
.ac-container label{ /*attributs des titres*/
    font-family: Verdana, sans-serif; /*police*/
    font-size: 19px; /*taille police*/
    line-height: 28px; /*hauteur ligne*/
    padding: 5px 20px; /*marges intérieures*/
    position: relative;
    z-index: 20;
    display: block;
    height: 30px; /*hauteur*/
    cursor: pointer;
    color: #3C6162; /*couleur texte*/
    text-shadow: 1px 1px 1px rgba(200,200,200,0.8); /*ombre portée texte*/
    background: linear-gradient(#ffffff 0%,#eaeaea 100%); /*couleur fond*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}
.ac-container label:hover{
    background: #fff; /*couleur fond au survol*/
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{ /*attributs des titres sélectionnés et au survol*/
    background: linear-gradient(#B8F0FA 0%,#10BAD8 100%); /*couleur fond*/
    color: #3C6162; /*couleur texte*/
    text-shadow: 0px 1px 1px rgba(200,200,200, 0.8); /*ombre portée texte*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.ac-container label:hover:after{ /*pseudo-élément pour flèche titre au survol*/
    content: ''; /*!!IMPORTANT!!*/
    position: absolute;
    width: 24px; /*largeur*/
    height: 24px; /*hauteur*/
    right: 13px; /*positions*/
    top: 7px;
    background: transparent url(inc/img/general/gene_1/openg.png) no-repeat center center; /*flèche open*/
}
.ac-container input:checked + label:hover:after{ /*pseudo-élément pour flèche titre sélectionné au survol*/
    background-image: url(inc/img/general/gene_1/closeg.png); /*flèche close*/
}
.ac-container input{
    display: none;
}
.ac-container article{ /*attributs des articles masqués*/
    background: #f0f0f0; /*couleur fond*/
    margin-top: 0px; /*marge extérieure haute*/
    overflow: hidden;
    height: 0px; /*hauteur = 0 -> invisible*/
    transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
    transform-origin:0 0; /*origine transformation : ici haut*/
    position: relative;
    z-index: 10;
}
.ac-container article p{ /*attributs des paragraphes*/
    font-style: italic; /*à ajuster ou supprimer*/
    color: #777; /*couleur*/
    font-size: 14px; /*taille police*/
    line-height: 23px; /*hauteur ligne*/
    margin:0; /*marges extérieures*/
    padding: 10px 20px; /*marges intérieures*/
}
.ac-container input:checked ~ article{ /*attributs des articles à la sélection*/
    transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.ac-container input:checked ~ article.ac{ /*attributs des articles à la sélection*/
    height: auto; /*hauteur*/
    transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}
</style>

Code simplifié du corps de l'article : exemple 1

<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="
checkbox" />
        <label for="ac-1">Titre 1</label>
            <article class="ac">
                <p>Contenu ac-1</p>
            </article>
    </div>

    <div>
        <input id="ac-2" name="accordion-1" type="
checkbox" />
        <label for="ac-2">Titre 2</label>
            <article class="ac">
                <p>Contenu ac-2</p>
            </article>
    </div>

    <div>
        <input id="ac-3" name="accordion-1" type="
checkbox" />
        <label for="ac-3">Titre 3</label>
            <article class="ac">
                <p>Contenu ac-3</p>
            </article>
    </div>

    <div>
        <input id="ac-4" name="accordion-1" type="
checkbox" />
        <label for="ac-4">Titre 4</label>
            <article class="ac">
                <p>Contenu ac-4</p>
            </article>
    </div>
</section>

Code simplifié du corps de l'article : exemple 2

<section class="ac-container">
    <div>
        <input
checked="checked" id="ac-5" name="accordion-2" type="radio" />
        <label for="ac-5">Titre 5</label>
            <article class="ac">
                <p>Contenu ac-5</p>
            </article>
    </div>

    <div>
        <input
id="ac-6" name="accordion-2" type="radio" />
        <label for="ac-6">Titre 6</label>
            <article class="ac">
                <p>Contenu ac-6</p>
            </article>
    </div>

    <div>
        <input
id="ac-7" name="accordion-2" type="radio" />
        <label for="ac-7">Titre 7</label>
            <article class="ac">
                <p>Contenu ac-7</p>
            </article>
    </div>

    <div>
        <input
id="ac-8" name="accordion-2" type="radio" />
        <label for="ac-8">Titre 8</label>
            <article class="ac">
                <p>Contenu ac-8</p>
            </article>
    </div>
</section>

L'exemple 1 est de type="checkbox" (toutes les boites peuvent donc s'ouvrir ensemble). L'exemple 2 est de type="radio" (une boite s'ouvre et celle qui était ouverte se ferme).

Pour ouvrir une boite par défaut, il faut placer dans l'exemple 1 comme dans l'exemple 2 : checked="checked" à l'intérieur de la balise <input de votre choix. Dans l'exemple 1 il est possible d'ouvrir plusieurs boites par défaut, mais pas dans l'exemple 2.

Respectez bien les id="ac-1" , id="ac-2" ... en les différentiant : un par "article accordéon" des textes.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


Date de création : 08/01/2019
Catégorie : Astuces - Autres astuces en CSS
Page lue 2684 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » CSS Textes en accordéon

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 45 membres
Connectés :
membresJeanDenis

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés