Cet exemple permet de gérer l'affichage d'un élément masqué. Imaginons une page de news avec des titres de news suivis d'une description courte.

Si le visiteur s'interresse à une news, il peut alors cliquer sur 'lire là suite' et voir le texte complet comme dans l'exemple ci-dessous.

L'exemple proposé utilise les styles css pour gérer l'affichage d'un élément, plus précisément le style display.

display: none masque un élément html, comme si il n'existait pas.
display: block affiche un élément html en mode block (comme P, H1, H2, ...)

par défaut, un paragraphe a le style display: block c'est pourquoi, le code initial impose le style display:none au paragraphe qui contient la description longue (ce qui le rend invisible par défaut), et aucun style particulier au paragraphe qui contient la description courte (ce qui fait qu'il est visible initialement).

L'idée est maintenant de rendre la description courte invisible, et de rendre la description longue visible lorsque l'on clique sur le lien lire la suite..., on ajoute donc la détection du clic onclick dans le lien pour appeler la fonction show. Dans la fonction show, on modifie les styles des paragraphes.

Un façon simple pour identifier les paragraphes est de leur mettre un attribut id.