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>

Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius