En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos ! Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.

    ¤ Deux "slideshows" sont disponibles avec ou sans JQuery : lisez les tutoriels : Accordion (CSS) et Circle Nav (JQuery).

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (à partir de GuppY 5.02.02) moyennant quelques champs à adapter dans "Config Look". Elles peuvent être testées sur Démo-skins en version 5.02.08 (et au-delà...) -ce sont celles qui sont proposées en téléchargement-.

    Démo-skins

    Zone de téléchargement

 
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 1607 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 44 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