Masquer par défaut du contenu

Pour éviter que la page soit trop longue une partie du contenu n'est pas affichée lors du chargement de la page.

La solution CSS

Vous connaissez, je pense, la solution CSS.

Par défaut la boite contenant le paragraphe a une petite hauteur ; l'éventuel surplus de texte est masqué. Mais si survol de la boite la hauteur de celle-ci devient "auto" donc tout le contenu s'affiche.

Le code type

CSS : div {height : 100px ; overflow : hidden; border : 1px solid red; } div:hover {height : auto; } HTML : <div> <p class ="remarque">Survolez la boite bordurée de rouge pour afficher tout son contenu. <h3>Histoire de Rome</h3> <p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. ... <p>Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ... <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, ... </div>

Exemple ci-dessous

Survolez la boite bordurée de rouge pour afficher tout son contenu.

Histoire de Rome

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

La solution jQuery

L'extension UI de ce fameux Framework propose la fonction accordion().
Tous les widgets de l'extension jQuery UI sont traitées dans le tuto "javaScript & jQuery" dans ce même site. Tutoriel JavaScript & jQueyr

Solution HTML

Grâce à la version 5 il existe désormais une solution HTML : emploi des nouvelles balises details & summary

Exemple ci-dessous

Cliquez sur le petit triangle noir pour développer !

Histoire de Rome

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

Le code HTMl correspondant (extrait)

<details> <summary> <h3>Histoire de Rome</h3> <p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. ... </summary> <p>Saepissime igitur ... <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, ... </details>

La balise summary doit être contenue dans la balise details.
Au chargement de la page seul le contenu à l'intérieur de summary s'affiche et un triangle noir orienté vers la droite s'affiche.
Dès que vous cliquez sur le triangle tout le contenu s'affiche et alors le triangle noir s'oriente vers le bas.
Re-cliquez sur le triangle et alors le contenu est replié et le triangle retrouve son orientation initiale.
Au 1er janvier 2019 ces deux balises sont implémentées par FireFox et Chrome mais pas par MS Edge ...
Retour menu