Créer lien "lire la suite" pour article trop long

Html

zoro -
dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention - 6 déc. 2017 à 16:10

Bonjour,

Je souhaite alléger (visuellement) ma page car il y a beaucoup de texte. Pour cela, j'aimerais donc insérer un lien "lire la suite" qui lorsque l'on clique dessus afficherait le texte en dessous puis permettrait de "masquer les textes" selon l'envie du visiteur.
J'ai vu ça sur quelques sites et je trouve ça plutôt pas mal. Je pense qu'il faut utiliser du css mais je ne sais pas exactement. Je n'ai pas envie d'utiliser de js.

Je vous remercie pour tous vos conseils et pour votre aide

zoro

A voir également:

Lire la suite en page suivante
Lire le coran en français pdf - Télécharger - Histoire & Religion
Lire epub - Guide
Supprimer une page word - Guide
Lire fichier bin - Guide
Comment lire un message supprimé sur whatsapp - Guide

5 réponses

Réponse 1 / 5

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Bonjour,

Tu peux utiliser ceci (trouvé avec une recherche) :

CSS

<style type="text/css">
#cache {
   display: none;
}
#cache:target {
   display: block;
}
</style>

HTML

<div>Ton texte visible<a href="#cache"> [Lire la suite] </a></div>
<div id="cache">La suite du texte<a href=""> [Voir moins]</a></div>

Réponse 2 / 5

zoro

Bonjour Dugenou,

J'ai testé ce code est cela ne fonctionne pas.
voilà ce qui est affiché:

Ton texte visible [Lire la suite]
La suite du texte [Voir moins]

Si vous avez une autre solution,merci beaucoup

zoro

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Bonjour,

C'est étonnant, car il fonctionne chez moi.

Tu as bien mis le CSS, soit tel quel dans la partie <head> de ta page,

<style type="text/css">
#cache {
   display: none;
}
#cache:target {
   display: block;
}
</style>

soit

#cache {
   display: none;
}
#cache:target {
   display: block;
}

dans ton fichier de styles CSS.

Réponse 4 / 5

zoro

Re Bonjour,

J'ai encore 2petites questions...

Pourquoi lorsque l'on clique sur "lire la suite" la page bouge et le début de la suite du texte est affiché tout en haut de la page. Est-il possible de faire en sorte que la page ne bouge pas? et ainsi que le début de l'article reste affiché et que seul le bas de la page bouge.

De même, lorsque l on clique sur voir moins, on retourne tout en haut de la page. N'est il pas possible de revenir simplement au début de l'article est non au début de la page?

je ne sais pas si c'est très clair... c'est difficile d'expliquer

merci pour votre aide

zoro

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Bonjour,

Je comprends bien ta question, mais je ne sais pas comment faire. Il faudrait voir si c'est possible, avec un spécialiste du CSS, ce que je ne suis pas.

zoro > dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention

Ok. Merci tout de même d'avoir pris le temps de me répondre. J'espère trouver quelqu'un qui saura me répondre...

Discussions similaires

Code HTML pour "lire la suite"

Virus Dr Guard sur mon PC

Pourquoi je ne peux plus commenter sur Facebook ?

afficher une image en cliquant sur un lien

Création de bouton dynamique HTML/CSS (onclick)

Apparition bouton retourner en haut de la page

Votre réponse

Discussions similaires