Ouvrir un texte - Lire la suite - CSS et HTML

Supposons que vous ayez un texte assez long. Pour ne pas faire peur au lecteur potentiel, nous allons cacher une partie de ce texte. Il faudra cliquer sur un lien pour rendre la suite visible. Ce n'est pas bien compliqué.

1ère étape :

Soit vous rajoutez dans votre CSS :

#lirelasuite {display:none;}

Soit vous rajoutez tout au début de l'HTML de l'article :

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

2ème étape :

Dans votre article, en HTML, au niveau où vous voulez placer lire la suite, vous rajoutez

<p><a href="#nogo" onclick="document.getElementById('lirelasuite').style.display = 'block'; this.style.display = 'none';">Lire la suite...</a></p>
<p id="lirelasuite">VOTRE TEXTE</p>

Un exemple :

Fantine, jeune mère célibataire, sans ressources, abandonnée par son amant alors qu'elle était enceinte, doit subvenir à ses besoins et à ceux de sa fille, Cosette ; elle la confie donc à un couple d'aubergistes peu scrupuleux, les Thénardier.

Lire la suite...

Jean Valjean, ancien forçat, endurci par un sort peu favorable, decide de recouvrer sa dignité et commence à aider Fantine, qu'il rencontre par hasard dans son usine. Malgré le faux nom qu'il
utilise, M.Madeleine, alias Jean Valjean, est reconnu par Javert, un policier, et retourne au bagne. Il réussit néanmoins à fuir à nouveau dans l'unique but de sauver et de s'occuper de Cosette,
malgré les obstacles... Victor Hugo signe ici la plus grande épopée française populaire, avec comme toile de fond Paris, ses quartiers et son histoire !

Vérifiez bien dans votre source que vous n'avez ni :

• <p> et </p> autres que ceux du code
  
• <div> et </div>