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

Afficher la suite

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 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...

Réponse 5 / 5

zoro

J'ai trouvé un site qui montre bien l'exemple que je veux avec l utilisation lire la suite.
Si vous regardez bien, en cliquant sur lire la suite, c'est le bas de l'article qui bouge et non pas le haut comme dans le code que j'ai inséré.
le site est : https://www.johnbeckley.com/fr/cat/art-numerique/
de même lorsque l'on clique sur "masquer", cela ne bouge pas le reste de la page alors que moi, je reviens tout en haut de ma page.

merci de votre aide

zoro

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

Dans ton exemple, c'est du JavaScript .

Discussions similaires

afficher une image en cliquant sur un lien

Image en HTML ne s'affiche pas

192.168.49.1

rendre une barre de recherche fonctionnelle

Afficher des données de ma BDD en HTML ET PHP (PDO)

Créer une table des matières en HTML sous WordPress

Votre réponse

Discussions similaires