[Javascript] Cacher ou afficher un élement
Par JC le mercredi 17 septembre 2008, 18:02 - Programmation - Lien permanent
Un mini script pour afficher ou cacher des elements d'un simple click de souris ça vous interresse? Ok je ne vais pas chercher loin avec ce petit bout de code mais je le trouve sympa, facile à mettre en oeuvre et à utiliser.Bon, ce script est à compléter car il n'y a pas les tests d'usage comme par exemple voir si le navigateur utilise le javascript mais je vous laisse le soin de faire le reste!
Quelques explications suivi de l'exemple concret:
1) Dans le head de ma page html j'insere deux balises de style Css qui sont:.hidden {Ceci me permet de cacher ou afficher les elements avec class="hidden" ...
display: none;
}
.visible {
display: inline;
}
2) Ensuite toujours dans le head de ma page, j'insere mon bout de script java:function hide(id) {Lorsque j'apelle la function hide() sur un evenement donné, je recherche l'id de la balise à modifier puis je modifie sa class.
if (document.getElementById(id).className == "hidden") {
document.getElementById(id).className = "visible";
} else {
document.getElementById(id).className = "hidden";
}
}
3) Puis dans la page ou je désire lancer la modification de l'etat d'un element j'insere mon comportement:<a onclick="javascript:hide('cadre1');javascript:hide('cadre2');javascript:hide('cadre3');">
En cliquant ici je change l'état des 3 cadres.
</a>
Ici en cliquant sur la balise "a" j'apelle hide() pour modifier l'etat des 3 cadres.
4) Exemple hide.html:
Voici la page d'exemple en complet que vous pouvez télécharger en piece jointe de ce billet.<html>
<head>
<title>[Javascript] Cacher afficher des éléments</title>
<style type="text/css" media="screen">
.hidden {
display: none;
}
.visible {
display: inline;
}
div {
border: 2px solid #CCCCCC;
background: #CCCCCC;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function hide(id) {
if (document.getElementById(id).className == "hidden") {
document.getElementById(id).className = "visible";
} else {
document.getElementById(id).className = "hidden";
}
}
</script>
</head>
<body>
<a href="hide.html">Recharger</a>
<hr />
<p>Cliquer sur le cadre ci-dessous pour le cacher.</p>
<div id="cadre1" class="visible" onclick="javascript:hide('cadre1');">
Cachez moi!<br />
Blablabla
</div>
<hr />
<p>Cliquer sur le cadre ci-dessous pour en faire aparaitre un autre.</p>
<div id="cadre2" class="visible" onclick="javascript:hide('cadre2');javascript:hide('cadre3');">
Je suis un cadre!<br />
Blabla bla
</div>
<div id="cadre3" class="hidden" onclick="javascript:hide('cadre2');javascript:hide('cadre3');">
Et je suis un autre cadre...<br />
Bla bla bla
</div>
<hr />
<a onclick="javascript:hide('cadre1');javascript:hide('cadre2');javascript:hide('cadre3');">En cliquant ici je change l'état des 3 cadres.</a>
</body>
</html>
Et voila.
Commentaires
arrrgg les 'onclick" dans le html ! C'est horrible ! C'est pas bien du tout !
Un exemple beaucoup plus propre :
http://www.journaldunet.com/develop...
@+
@exotux
Comme quoi je suis vraiment débutant en javascript!
Tu vois en 2min avec ton lien j'en ai appris plus qu'en 3 mois ailleurs!
L'exemple dans ton lien explique simplement et par un exemple concret (ce que j'aime) comment séparer javascript et html.
(ce que je fais déjà avec le php que je connais un peu mieux...)
Merci
c'est pas que ce'st pas bien ou bien c'est juste une question de presentation, dailleurs tout ce qui inline ce parse plus rapidement, et d'ailleurs si tu regarde le dev de google ; tout est en inline , c'est pas pour rien. faut arreté un peu avec ces discours.
En même temps j'ai essayé "l'autre façon"... Que c'est long pour pas grand chose!
Ca donnerai un truc comme ça:
function hideNote() {
if (document.getElementById) {
if (document.getElementById('pleasenote')) {
e = document.getElementById('pleasenote');
e.onclick = function() {
if (e.className == "hidden") {
e.className = "visible";
} else {
e.className = "hidden";
}
}
}
}
}
addLoadEvent(hideNote);
Franchement j'ai toujours autant de mal à accrocher avec le Javascript...