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

zoro - 4 déc. 2017 à 16:54 - Dernière réponse : dugenou 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 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 

9 réponses

Répondre au sujet
dugenou 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 Dernière intervention - 4 déc. 2017 à 17:27
+1
Utile
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> 



Commenter la réponse de dugenou
0
Utile
1
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 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 Dernière intervention - 5 déc. 2017 à 10:41
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.
Commenter la réponse de zoro
0
Utile
Bonjour Dugenou,

Excellent, Ca fonctionne! J'avais oublié de fermer une balise...
Merci de votre patience...

zoro
Commenter la réponse de zoro
0
Utile
2
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 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 Dernière intervention - 6 déc. 2017 à 15:40
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 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 Dernière intervention - 6 déc. 2017 à 15:51
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...
Commenter la réponse de zoro
0
Utile
1
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 4890 Messages postés mercredi 19 janvier 2005Date d'inscriptionContributeurStatut 11 décembre 2017 Dernière intervention - 6 déc. 2017 à 16:10
Dans ton exemple, c'est du JavaScript .
Commenter la réponse de zoro