Afficher / Cacher une DIV au clic en CSS

20 septembre 2016 LABO & TESTS
CSS HTML

Il est parfois utile de cacher un élément complémentaire dans une page et non utile à la première lecture pour le visiteurs (compléments d'information, illustration...)

Nous allons utiliser le CSS pour cacher cette DIV.

le code CSS :

<style type="text/css">
#afficher {
   width:500px;
}
#divjoconde {
   display:none;
   background: #ddd
}
#afficher:target #divjoconde {
   display:block
}
.masquer {
   display:none;
}
#afficher:target .masquer {
   display:inline;
}
#afficher:target .afficher {
   display:none;
}
</style>

le code HTML :

   <div id="afficher">
      <div id="masquer">
         <p>
          Léonard de Vinci, né à Vinci le 15 avril 1452 et mort à Amboise le 2 mai 1519, est un peintre florentin et un homme d'esprit universel, à la fois artiste, organisateur de spectacles et de fêtes, scientifique, ingénieur, inventeur, anatomiste, peintre, sculpteur, architecte, urbaniste, botaniste, musicien, poète, philosophe et écrivain. océan de langues.
         </p>
         <p id="divjoconde">
         <img src="http://perso.univ-lille3.fr/~rlecerf/data/images/200px-la_gioconda.jpg">
         </p>
         <p>C'est d'abord comme peintre que Léonard de Vinci est reconnu. Deux de ses œuvres, <a href="https://lecerfraphael.fr/afficher-cacher-une-div-au-clic-en-css.html#afficher" class="afficher">La Joconde</a><a href="https://lecerfraphael.fr/afficher-cacher-une-div-au-clic-en-css.html#masquer" class="masquer">La Joconde</a> et La Cène, sont des peintures mondialement célèbres, souvent copiées et parodiées
         </p>
      </div>
   </div>
</body>

Démo : (cliquer sur le mot La Joconde)

Léonard de Vinci, né à Vinci le 15 avril 1452 et mort à Amboise le 2 mai 1519, est un peintre florentin et un homme d'esprit universel, à la fois artiste, organisateur de spectacles et de fêtes, scientifique, ingénieur, inventeur, anatomiste, peintre, sculpteur, architecte, urbaniste, botaniste, musicien, poète, philosophe et écrivain. océan de langues.