• Spoiler

    Vous allez m'en vouloir mais cette page de bricolage est plus pour me rendre compte de ce qu'on peut faire sur les "spoilers" que pour proposer des codes.

    Cependant, si vous souhaitez un détail sur l'un ou l'autre de mes essais...

    D'après ce que je comprends, un spoiler en CSS est un cadre qui n'apparaît qu'au clic ou au survol d'un élément visible.
    Survolez cette première ligne.

    Vous trouverez de nombreux exemples en javascript mais il me semble que l'on peut faire uniquement en CSS et de diverses façons.

    Dans ce cas, la partie visible est un input et non un paragraphe (p), pour recevoir le clic.


    Le principe est le même: sa hauteur est limitée à la partie que l'on veut laisser apparaître et cache donc la suite du texte.
    Au clic, la hauteur est modifiée pour laisser apparaître l'ensemble du texte, selon l'animation paramétrée.
    Un clic hors du bouton remet en position de départ.

    le début du texte avec un clic sur pour lire la suite,et, en continuité, la suite du texte par un code display, qui commande l'affichage ou non, d'un élément
    L'inconvénient est que la commande est brutale.
    ...

    Dans ce cas, la partie visible est un input et non un paragraphe (p), pour recevoir le clic.
    On peut faire apparaître un paragraphe, non pas en agrandissant une de ses dimensions mais en l'affichant au centre de l'écran, en premier plan; ici, en changeant son opacité.

    Le principe est le même: Le paragraphe est transparent et devient opaque au clic sur le bouton: lire la suite, bouton qui disparaît au clic.
    Au clic, le paragraphe devient opaque; il peut contenir ce que l'on veut.
    Un clic hors du bouton remet en position de départ.