BOURSE

Forum

Réagissez dans les forums de JDN Développeurs

Ainsi, le script que nous vous proposons ici permet de charger un contenu, mais de ne l'afficher qu'à la demande du visiteur. L'espace d'affichage est donc préservé pour le contenu principal, et le petit bonus s'affiche et disparait en un clic, sans nécessiter de relancer de la page. Cette incroyable prouesse technique est réalisée par le bon usage des propriétés visibility et display de CSS, et des méthodes du DOM, notamment getElementByID().

Le code
<style>
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }

.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }

.contenant
  {
  display : block;
  border: 1px solid #000000;
  }
</style>

<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }

function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }

cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>

<div class="clicTitre">
  <a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');">Fermer</a>
  </div>
Xavier Borderie<br>
Rédacteur Nouvelles Technologies<br>
<br>
Journal Du Net Développeurs / Benchmark Group <br>
4, rue Diderot <br>
92156 Suresnes CEDEX <br>
<a href="http://developpeurs.journaldunet.com"> http://developpeurs.journaldunet.com</a><br>
</div>