120.088 visiteurs uniques depuis la création pour 2.172.130 articles lus

FAIRE APPARAITRE PUIS DISPARAITRE DU TEXTE A LA FIN D'UN ARTICLE.

par André MARINI 17 Novembre 2018, 12:31 Astuces de blogueur

Voici comment faire apparaitre ou disparaitre, au gré du lecteur, un texte complémentaire au bas d'un article.

On peut, bien entendu, placer cet encart à n'importe quel endroit en changeant la valeur "top"

position:absolute;top:1330px;left:200px;
   background-color:silver; color:blue;
   border:2px solid navy;
   padding:2em;

Cette variable sera fonction de la longueur du texte et il peut s'avérer nécessaire de la modifier

CODE

<script type="text/javascript">

/** Fonction basculant la visibilité d'un élément dom
* @parameter anId string l'identificateur de la cible à montrer, cacher
*/
function toggle(anId)
{
   node = document.getElementById(anId);
   if (node.style.visibility=="hidden")
   {
       // Contenu caché, le montrer
       node.style.visibility = "visible";
       node.style.height = "auto";           // Optionnel rétablir la hauteur
   }
   else
   {
       // Contenu visible, le cacher
       node.style.visibility = "hidden";
       node.style.height = "0";           // Optionnel libérer l'espace
   }
}
</script>
</head>
<style type="text/css">
#foo {
   position:absolute;top:10000px;left:1000px;
   background-color:silver; color:black;
   border:4px solid navy;
   padding:2em;
}
</style>

<h1>Titre </h1>
<p>Contenu précédant </p>

<a href="#" onclick = "toggle('foo')">Cliquer pour basculer l'état du div suivant</a>

<div id="foo">Il n'y a pas lieu de cliquer sur le contenu</div>

   <p>Contenu suivant </p>
<style type="text/css">
#foo {
   position:absolute;top:200px;left:200px;
   background-color:silver; color:green;
   border:2px solid navy;
   padding:2em;
}
</style>

</html>

RESULTAT

FAIRE DISPARAITRE PUIS REAPPARAITRE DU TEXTE DANS UN ARTICLE EN CLIQUANT ICI.

FAIRE UN ENCART ESCAMOTABLE DANS UN ARTICLE CONTENANT DU TEXTE QU'IL SERA POSSIBLE DE DEVOILER OU D'OCCULTER.