Création d'un spoiler javascript et CSS : afficher et masquer du texte

Voici une méthode très simple pour créer un spoiler (afficher/masquer une partie de texte) qui permet, non pas de masquer l'ensemble du texte, mais seulement une partie, grâce au CSS. Compatible avec n'importe quel navigateur, même IE 5.5 !
Attention : si vous êtes venu récemment sur ce site, rechargez la page (F5 au clavier) afin de mettre les CSS à jour.

Le script en action

Fonction javascript

<script type="text/javascript">
/* le texte du lien implémenté en variables autorise une version multilingue */
var afficher = 'En savoir plus';
var cacher = 'Masquer';
function AfficherMasquer(id) {
	if (document.getElementById(id).className == 'MasquerTxt') {
		// on applique le style 'MontrerTxt' (hauteur bloc auto)
		document.getElementById(id).className = 'MontrerTxt';
		// on change le libellé du lien
		document.getElementById('ancre_'+id).innerHTML = cacher;
	} else {
		document.getElementById(id).className = 'MasquerTxt';
		document.getElementById('ancre_'+id).innerHTML = afficher;
	}
}
</script>

Styles CSS

La ruse s'appuie sur la propriété overflow de CSS, qui permet de masquer seulement une partie du texte, en délimitant la hauteur du bloc div. L'avantage est de ne pas réserver un espace pour ce bloc, inséré dans le flux normal de la page (une fois "ouvert" il "pousse" le bloc suivant).

<style type="text/css">
/* styles essentiels */
.MasquerTxt { height: 48px; /* hauteur ajustée en fonction du site */ overflow: hidden; }
.MontrerTxt { height: auto; }
/* styles facultatifs */
.MontrerTxt, .MasquerTxt { margin: 7px 10px; background: #eee; padding: 5px; border: 1px solid black }
<style>

Intégration dans la page

<div id='texte' class='MasquerTxt'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce adipiscing, purus quis aliquet venenatis, libero ipsum ultricies sapien, at facilisis risus neque vitae mi.
<br>Nulla gravida, purus a interdum mattis, felis nisl aliquam sapien, non consequat ante turpis sed mi. Morbi augue velit, consectetur id lobortis eget, dapibus in risus. 
<br>Fusce vel sapien tortor, at iaculis lacus. Proin lectus ipsum, ultrices in blandit nec, bibendum eget dolor. In hac habitasse platea dictumst. 
<br>Donec imperdiet velit nec nisi ultricies vitae eleifend mauris congue. Aenean vitae elit massa. Nulla eget vestibulum est. 
<br>Aenean mollis massa ut quam pulvinar vel porttitor felis congue. Aenean volutpat purus quis tortor hendrerit auctor.
</div>
<a href='#' id='ancre_texte' onclick="javascript:AfficherMasquer('texte');return false">En savoir plus</a>
<noscript>(<b>javascript est désactivé</b> : vous ne pouvez pas visualiser cette page correctement)</noscript>

<!-- à chaque nouveau bloc on incrémente 'texte' et 'ancre_texte' -->

<div id='texte1' class='MasquerTxt'>
Fusce vel sapien tortor, at iaculis lacus. Proin lectus ipsum, ultrices in blandit nec, bibendum eget dolor. 
<br>In hac habitasse platea dictumst. Donec imperdiet velit nec nisi ultricies vitae eleifend mauris congue. 
<br>Aenean vitae elit massa. Nulla eget vestibulum est. Aenean mollis massa ut quam pulvinar vel porttitor felis congue. 
<br>Aenean volutpat purus quis tortor hendrerit auctor. Pellentesque ut tempus tellus. 
<br>Aenean pharetra lorem eget orci vulputate vel feugiat magna pellentesque. Phasellus ac nibh lacus, sed varius turpis. 
<br>Nulla non urna vel ante dapibus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
</div>
<a href='#' id='ancre_texte1' onclick="javascript:AfficherMasquer('texte1');return false">En savoir plus</a>

http://dev.ppan.net [Haut de page]