Cet exemple est constitué de trois fichiers

  • le premier contient le code HTML
  • le deuxième, dans le sous-répertoire "css", contient la feuille de style
  • le troisième, dans le sous-répertoire "scripts", contient le JavaScript
Le positionnement relatif des fichiers est important pour que l'application fonctionne correctement.

Fichier "phrases_cachees_bis.html"

<!DOCTYPE html>
<html lang="fr-CA">
    <head>
        <meta charset="utf-8">
        <!-- Cette page est inspirée de l'exemple 13.1 de David Flanagan
             JavaScript - The Definitive Guide - 6th Edition - O'Reilly 2011 -->
        <title>Phrases cachées</title>
        <link rel="stylesheet" type="text/css" href="css/phrases_cachees_bis.css">
        <script src="scripts/phrases_cachees_bis.js" async></script>
    </head>
    <body>
        <div class="secret">
            <h3 class="declencheur">Cliquez ici pour dévoiler le premier texte caché</h3>
            <p>Ce texte est caché et apparait lorsque vous cliquez sur le titre.</p>
        </div>
        <div class="secret">
            <h3 class="declencheur">Cliquez ici pour dévoiler le deuxième texte caché</h3>
            <p>Si vous cliquez pour dévoiler le troisième texte caché, vous aurez une belle surprise.</p>
        </div>
        <div class="secret">
            <h3 class="declencheur">Cliquez ici pour dévoiler le troisième texte caché</h3>
            <p>Les questions de l'examen final sont...</p>
        </div>
    </body>
</html>

Fichier "css/phrases_cachees_bis.css"

/* CSS */
.secret * { display: none; } /* Tous les enfants de la classe "secret" ne sont pas affichés */
.secret *.declencheur { display: block; } /* Sauf pour la classe "declencheur" */

Fichier "scripts/phrase_cachees_bis.js"

// Ne rien faire avant que le document soit complètement chargé
window.onload = function() {
    "use strict";
    // Retrouver tous les éléments ayant la classe "secret"
    var elements = document.getElementsByClassName( "secret" );
    for ( var i = 0; i < elements.length; i++ ) { // Pour chacun...
        var elt = elements[ i ];
        // Trouver le déclencheur
        var titre = elt.getElementsByClassName( "declencheur" )[ 0 ] ;
        if ( titre ) { // Si le déclencheur existe...
            titre.onclick = genererGestionnaire( elt );
        }
    }
 
    function genererGestionnaire( div ) {
        // Quand le déclencheur est cliqué, révéler le contenu, et vice-versa...
        return function() {
            if ( div.className === "secret" ) {
                div.className = "visible";
            } else if ( div.className === "visible" ) {
                div.className = "secret";
            }
        };
    }
 
};