Créer une zone de texte de texte escamotable / déroulable d’un clic
Javascript + CSS : l’union fait la force !
Un des interets du script est de laisser apparaitre simplement la zone de texte ouverte sur les anciens navigateurs.
Par contre ce :C de bloqueur automatique de Scripts de IE coince par défaut la fenetre en position ouverte…
Testez avec un Firefox, vous verrez !
Le résultat :
Le script :
Tout d’abord on crée 3 calques, auquels on va appliquer des classes CSS différentes:
- La premiere, « Titre », est pour le calque de fond bleu
- La seconde, « blocTexte », est pour le calque à fond rose
- La troisieme, « Cacher », est pour le lien de fermeture du bloc de texte rose
<style type="text/css">
.Titre
{
width: 360px;
border-color: #000000;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 2px dashed;
background-color: #eeeeee;
}.Cacher
{
top: -25px;
position: relative;
text-align:right;
}.blocTexte
{
width: 350px;
background-color: #ffeae1;
padding: 5px;
display : block;
border: 1px solid #000000;
}
</style>
Ensuite on va créer 2 fonctions JavaScript :
- La premiere (affiche() ) vérifie si le navigateur est suffisemment récent pour l’exécuter (if(getElementById…, compatible avec les versions IE supérieures à 5)
- et si oui, rend la zone rose visibe
- La seconde (cache() ) fait l’inverse
<script>
function affiche(balise)
{
if (document.getElementById && document.getElementById(balise) != null)
{
document.getElementById(balise).style.visibility=’visible’;
document.getElementById(balise).style.display=’block’;
}
}function cache(balise)
{
if (document.getElementById && document.getElementById(balise) != null)
{
document.getElementById(balise).style.visibility=’hidden’;
document.getElementById(balise).style.display=’none’;
}
}</script>
Il ne reste plus qu’a appliquer les classes aux calques,
et à appliquer les fonctions JavaScript au calque rose par simple clics sur les liens ad-hocs :
<div class="Titre">
<a href="javascript:affiche(‘contenu’)">Cont@ct :</a>
</div><div class="blocTexte" id="contenu">
<div class="Cacher">
<a href="javascript:cache(‘contenu’);">(x) Fermer</a>
</div>Web Tolosa<br>
[ BLOG des TIC ]
webtolosa@gmail.com
<a href="https://www.webtolosa.com"> www.webtolosa.com</a>
</div>
Joli, non ? :))
Ce script date de 2007… il y a des réponses à ce sujet sur Google
Quand je lance le script, j’obtiens :
« Uncaught SyntaxError: Unexpected token ILLEGAL »
sur la ligne
« document.getElementById(balise).style.visibility=’visible’; »
Un immense merci pour ce code simple et efficace ! :))
Je me posais une question… J’utilise ce code pour les menus de mon site (pour avoir des menus escamotables qui prennent moins de place), et bien évidemment leur état initial se réinitialise à chaque chargement de page. Pourrait-on imaginer une astuce pour que l’état des boîtes soit sauvegardé pour chaque utilisateur ? J’ai bien évidemment pensé à l’utilisation d’iframes, mais je les ai en horreur et préférerais ne pas avoir à les utiliser (pour toutes les raisons que tout codeur qui se respecte connait). J’ai aussi pensé que l’état de chaque boîte (j’en ai 6 en tout) pourrait être sauvegardé dans la base de donnée pour chaque utilisateur, mais il me semble que cela demanderait un surplus de code conséquent (sans compter le fait que je n’ai qu’une très vague idée de la manière de coder tout ça)…
Je pense qu’il n’y a pas de solution simple, mais ça ne coûte rien de demander
Merci (même ci se post date de 2006
) tout simplement merci c’est exactement se que je cherchais :))
Exact, c’est mon commentaire qui n’est pas juste…
En fait, le calque « bloctexte » n’a aucune raison d’etre caché au chargement, d’apres le code, c’est la fonction cache() qui le cache lorsqu’on la declanche en cliquant sur le lien « Fermer »
Si vous souhaitez que les bloctexte soient fermés à l’ouverture de la page, il faudrait attribuer un attribut CSS visibility:hidden au calque rose, et transformer cet attribut en visible avec la fonction cache() en cliquant sur le lien du calque « cache() »… mais ce n’est plus la même fonction que celle de mon article !
Merci tout de même pour l’erreur de commentaire, je la rectifie !
Bonjour,
Ce script ne fonctionne pas complétement car est indiqué dans le code si le JavaScript est disponible, cache le contenu dès le chargement de la page hors le contenu est toujours affiché ou alors j’ai manqué une partie. Pouvez-nous expliquer ce qui ne va pas ? Merci