Autres astuces en CSS - Des textes en accordéon

→ Deux 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 contenté de jouer avec et d'adapter les propositions pour une page, une boîte d'adHoc ou d'un autre CMS, bien sûr. Elles sont totalement "responsive design". Les deux solutions sont décrites ci-dessous :

La première peut présenter ses soufflets fermés, et ils peuvent tous être ouverts : [type="checkbox"].

La seconde peut présenter, ou non, un soufflet ouvert, mais l'ouverture d'un autre soufflet ferme celui qui était ouvert : [type="radio"].

Dans tous les cas, la hauteur s'adapte au contenu.

Première possibilité :

Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

Ce texte a pour autre avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale. La méthode simpliste consistant à copier-coller un court texte plusieurs fois (« ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ») a l'inconvénient de ne pas permettre une juste appréciation typographique du résultat final.

Il circule des centaines de versions différentes du Lorem ipsum, mais ce texte aurait originellement été tiré de l'ouvrage de Cicéron, De Finibus Bonorum et Malorum (Liber Primus, 32), texte populaire à cette époque, dont l'une des premières phrases est : « Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... » (« Il n'existe personne qui aime la souffrance pour elle-même, ni qui la recherche ni qui la veuille pour ce qu'elle est... »).

Expert en utilisabilité des sites web et des logiciels, Jakob Nielsen souligne que l'une des limites de l'utilisation du faux-texte dans la conception de sites web est que ce texte n'étant jamais lu, il ne permet pas de vérifier sa lisibilité effective. La lecture à l'écran étant plus difficile, cet aspect est pourtant essentiel. Nielsen préconise donc l'utilisation de textes représentatifs plutôt que du lorem ipsum. On peut aussi faire remarquer que les formules conçues avec du faux-texte ont tendance à sous-estimer l'espace nécessaire à une titraille immédiatement intelligible, ce qui oblige les rédactions à formuler ensuite des titres simplificateurs, voire inexacts, pour ne pas dépasser l'espace imparti.

Seconde possibilité :

Contrairement à une idée répandue, le faux-texte ne donne même pas un aperçu réaliste du gris typographique, en particulier dans le cas des textes justifiés : en effet, les mots fictifs employés dans le faux-texte ne faisant évidemment pas partie des dictionnaires des logiciels de PAO, les programmes de césure ne peuvent pas effectuer leur travail habituel sur de tels textes. Par conséquent, l'interlettrage du faux-texte sera toujours quelque peu supérieur à ce qu'il aurait été avec un texte réel, qui présentera donc un aspect plus sombre et moins lisible que le faux-texte avec lequel le graphiste a effectué ses essais. Un vrai texte pose aussi des problèmes de lisibilité spécifiques (noms propres, numéros de téléphone, retours à la ligne fréquents, composition des citations en italiques, intertitres de plus de deux lignes...) qu'on n'observe jamais dans le faux-texte.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Ces exemples, dont le code est détaillé et commenté le plus possible, a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_textes_accordeon.css) dont l'appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/CSS_textes_accordeon.css" rel="stylesheet" />    

.ac-container { /*attributs du conteneur*/
	width: 95%; /*largeur du conteneur*/
	margin: 10px auto 30px; /*marges extérieures H DG B*/
	text-align: left; /*alignement texte gauche*/
}
.ac-container label,
.ac-container input[type="checkbox"] + label { /*attributs des titres*/
	font-family: Open sans, sans-serif; /*police*/
	font-size: 19px; /*taille police*/
	margin:0 auto 5px; /*marges extérieures H DG B à adapter*/
	line-height: 28px; /*hauteur ligne*/
	padding: 5px 20px; /*marges intérieures*/
	position: relative;
	display: block;
	height: 45px; /*hauteur*/
	cursor: pointer;
	color: #ffffff; /*couleur texte*/
	background: linear-gradient(to right, rgba( 0, 0, 0, .8), rgba( 75, 75, 75, .8)); /*couleur fond*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}
.ac-container label:hover,
.ac-container input[type="checkbox"] + label:hover
{
	background: rgba( 75, 75, 75, 1); /*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: rgba( 0, 0, 0, 1); /*couleur fond*/
	color: #d6af84; /*couleur texte*/
	font-weight:bold; /*gras du 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:before { /*pseudo-élément pour titre*/
	font-family: 'FontAwesome'; /*police*/
	content: '\f103'; /*caractère*/
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="checkbox"]:checked + label:before { /*pseudo-élément pour titre checkbox sélectionné*/
	font-family: 'FontAwesome';
	content: '\f102';
	padding-right:10px;
}
.ac-container input[type="radio"]:checked + label:before { /*pseudo-élément pour titre radio sélectionné*/
	font-family: 'FontAwesome';
	content: '\f105';
	padding-right:15px;
}
.ac-container input {
	display: none;
}
.ac-container article { /*attributs des articles masqués*/
	background: rgba(240,240,240,0.8); /*couleur fond*/
	margin-top: -5px; /*marge extérieure haute*/
	height: 0px; /*hauteur = 0 -> invisible*/
	transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
	transform-origin:0 0; /*origine transformation : ici haut*/
	overflow: hidden;
	position: relative;
}
.ac-container article p { /*attributs des paragraphes*/
	font-style: normal; /*à ajuster ou supprimer*/
	color: #111; /*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*/
}

Notez que dans les exemples, une police de caractère (Font Awesome : https://fontawesome.com/ ) est présente pour les "chevrons" des titres. Si vous souhaitez la déclarer pour votre site, veuillez poster sur le forum, afin que je vous en indique la procédure. Mais il est possible d'utiliser plus simplement des caractères "standards". Pour cela utilisez cette partie de style à la place :


.ac-container label:before{ /*pseudo-élément pour titre*/
	content: '▼'; /*caractère*/
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="checkbox"]:checked + label:before{ /*pseudo-élément pour titre checkbox sélectionné*/
	content: '▲';
	padding-right:10px;
}
.ac-container input[type="radio"]:checked + label:before{ /*pseudo-élément pour titre radio sélectionné*/
	content: '▬';
	padding-right:10px;
}

Puis ci-dessous les codes simplifiés pour ne conserver que la structure, afin de placer l'un ou l'autre des textes accordéon où vous le souhaitez dans votre page.

Premier exemple :


<section class="ac-container">

<div><!-- bloc ac-1 -->
 <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><!-- fin bloc ac-1 -->

<div><!-- bloc ac-2 -->
 <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><!-- fin bloc ac-2 -->

<div><!-- bloc ac-3 -->
 <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><!-- fin bloc ac-3 -->

<div><!-- bloc ac-4 -->
 <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><!-- fin bloc ac-4 -->

</section><!-- fin ac-container -->

Second exemple :


<section class="ac-container">

<div><!-- bloc ac-5 -->
 <input 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><!-- fin bloc ac-5 -->

<div><!-- bloc ac-6 -->
 <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><!-- fin bloc ac-6 -->

<div><!-- bloc ac-7 -->
 <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><!-- fin bloc ac-7 -->

<div><!-- bloc ac-8 -->
 <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><!-- fin bloc ac-8 -->

</section><!-- fin ac-container -->
  • Pour chaque exemple, à l'intérieur de [section class="ac-container"]...[/section], dans les blocs, les noms name="accordeon-X" doivent être tous identiques et les Id="ac-X" tous différents et repris obligatoirement dans [label for="ac-X"]Titre XXXX[/label]. Vous pouvez ajouter ou supprimer autant de blocs que nécessaire.

  • Le premier est de type="checkbox" (tous les soufflets peuvent donc s'ouvrir ensemble). Le second est de type="radio" (un soufflet s'ouvre et celui qui était ouvert se ferme).

  • Pour ouvrir un soufflet par défaut, dans les deux cas, il faut placer dans la balise [input... /] checked="checked" ainsi : [input checked="checked" id="ac-X" name="accordion-X" type="radio" /] avec le type qui convient, bien sûr.

    Dans le premier exemple, il est possible d'ouvrir plusieurs soufflets par défaut, mais pas dans le second exemple.

    Il est bien sûr possible, comme ici, de tout fermer par défaut, cependant, dans le second exemple type="radio", il n'est pas possible de tout refermer, sauf à recharger complètement la page.

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




    Astuces

    adHoc

    Iframes responsives

    Camera

    Unite Gallery

    Animations au survol

    Autres astuces en CSS

    Audio-Players

    Carousels