22 juil. 2010

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>

10 commentaires:

  1. Bonjour,

    Peut être ma question peut semble ridicule mais pour l'option 1 je le positionne ou dans le CSS (je suis sur overblog)

    Merci d'avance

    RépondreSupprimer
  2. Bonjour Mademoiselle Sab :) le plus facile est de toujours positionner les rajouts en fin de CSS, ainsi :
    1/ tu les retrouves plus facilement si tu veux les modifier ou les supprimer
    2/ ils prennent le pas sur les lignes précédentes qui pourraient être contradictoires

    RépondreSupprimer
  3. Bonjour,
    quand on clique sur le lien, ça ouvre un onglet... ou ça renvoi vers la page d'accueil. Comment faire pour rester sur la même page ?
    Merci en tout cas

    RépondreSupprimer
  4. Bonjour :) c'est le cas sur ce blog précis, car j'ai demandé à tous les liens de s'ouvrir dans une nouvelle fenêtre. Mais normalement, le lien s'ouvre dans la mm fenêtre.

    RépondreSupprimer
  5. Bonjour Anna,
    Dans le cas où on a plusieurs articles dans un tableau avec chaque ligne qui correspond à un post (regroupement d'une catégorie), la fonction lire la suite marche pour le premier article mais pas pour les suivants. Le "lire la suite" ne s'ouvre pas.
    Pourtant je l'ai vu dans certains blogs. L'intérêt étant bien de faire suivre le plus d'articles possible les uns à la suite des autres, sans qu'il y ait des longueurs.
    Mais alors quel code faut-il avoir ?
    Merci bcp d'avance pour cette réponse, j'ai ramé longtemps, je n'y arrive pas.
    Cordialement.
    Geeeen

    RépondreSupprimer
  6. Bonjour Green, Dans la première partie, tu remplaces
    #lirelasuite
    par
    #lirelasuite1
    et dans la seconde partie
    < p id="lirelasuite">
    par
    < p id="lirelasuite1">
    et ainsi de suite.

    RépondreSupprimer
  7. Bonjour,

    C'est presque parfait, utile et très simple. Un petit détail, quand même : est-il possible d'imaginer un outil qui permette de refermer le texte caché une fois qu'on l'a lu ?…

    Merci d'avance pour votre aide,

    Hervé

    RépondreSupprimer
  8. Merci pour ce super tuto ! Est-il possible de remplacer directement "lire la suite" par le texte, sans que le texte passe à la ligne quand on clique ?
    Merci :)

    RépondreSupprimer
  9. Bonjour Anna Je fais tout ce qui est dit dans le tuto mais le texte apparait sous lien "lire la suite" et lorsque on clique sur ce lien le texte apparait une deuxième fois. Alors pouvez-vous m'expliquer s'il vous plait?
    Merci.

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)