Afficher/cacher des bouts de code HTML

Le
tochiro
Bonjour,

Je voudrais montrer/cacher une liste ul en cliquant sur le titre de la
liste (h3). Comment y parvenir en utilisant le DOM ?

Merci par avance
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pascal PONCET
Le #732950
Je voudrais montrer/cacher une liste ul en cliquant sur le titre de la
liste (h3). Comment y parvenir en utilisant le DOM ?


Tu peux coller ça dans ton "body" :


<h3 id="titre_1">Titre de la liste 1</h3>
<ul id="liste_1">
</ul>
<h3 id="titre_2">Titre de la liste 2</h3>
<ol id="liste_2">
</ol>
<script>
function show_hide( el_id ) {
var el_style = document.getElementById( el_id ).style;
el_style.display = ( el_style.display == "none" ) ? "block" : "none";
}
document.getElementById( "titre_1" ).onclick = function() {
show_hide( "liste_1" ); };
document.getElementById( "titre_2" ).onclick = function() {
show_hide( "liste_2" ); };
</script>


Valable pour tous les navigateurs supportant "getElementById".

@+, Pascal.

tochiro
Le #732663
On Fri, 06 Apr 2007 20:03:19 +0200, Pascal PONCET

<h3 id="titre_1">Titre de la liste 1</h3>
<ul id="liste_1">
</ul>
<script>
function show_hide( el_id ) {
var el_style = document.getElementById( el_id ).style;
el_style.display = ( el_style.display == "none" ) ? "block" : "none";
}
document.getElementById( "titre_1" ).onclick = function() {
show_hide( "liste_1" ); };
document.getElementById( "titre_2" ).onclick = function() {
show_hide( "liste_2" ); };
</script>
Merci pour ton aide. J'ai essayé ton code mais ça ne veut pas marcher.

Pourtant, je comprends ce que tu as fait (sans avoir pu le faire
moi-même) et ça me paraît correct...

Mihamina (R12y) Rakotomandimby
Le #732662
tochiro -
Merci pour ton aide. J'ai essayé ton code mais ça ne veut pas marcher.


En meme temps, il a dit dans quelles conditions ça peut marcher, et comme
par hasard, tu n'a rien apporté comme information supplémentaire pour
confirmer ou informer ses conditions. Ou bien tu attends qu'on te le
demande explicitement?

tochiro
Le #732661
On Fri, 06 Apr 2007 21:28:16 +0200, "Mihamina (R12y) Rakotomandimby"

tochiro -
Merci pour ton aide. J'ai essayé ton code mais ça ne veut pas marcher.


En meme temps, il a dit dans quelles conditions ça peut marcher, et comme
par hasard, tu n'a rien apporté comme information supplémentaire pour
confirmer ou informer ses conditions. Ou bien tu attends qu'on te le
demande explicitement?


Il a dit "tous les navigateurs supportant getElementById".

Voici le code html tel qu'il est sur ma page :

<body>
<h3 id="titre1">ma liste</h3>
<ul id="liste1">
</ul>

Et le code js que j'ai mis dans un fichier externe référencé dans mon
fichier html :

function show_hide(el_id)
{
var el_style = document.getElementById(el_id).style;
el_style.display = (el_style.display == "none") ? "block" :
"none";
}
document.getElementById("titre1").onclick = function()
{
show_hide("liste1");
}


Pascal PONCET
Le #732660
Et le code js que j'ai mis dans un fichier externe référencé dans mon
fichier html :


Ok pour un fichier externe, mais à quel endroit du html est-il référencé?

S'il est dans le "head" (ou au début du "body"), javascript tentera
d'exécuter le code AVANT le chargement complet de la page.
Cela ne posera pas de problème pour la définition de fonction.
Par contre, l'association de la gestion d'évènement "onclick" ne pourra
pas se faire car "document.getElementById("titre1")" n'est pas encore
défini! (avec une console javascript activée, tu devrais avoir un
message du style "document.getElementById("titre1") has no properties")

Il faut donc appeler le script à la fin du "body" (ou, au minimum, juste
après le code html des éléments sur lesquels agit le script).

Bonne prise de tête,
Pascal

tochiro
Le #732659
On Fri, 06 Apr 2007 23:25:21 +0200, Pascal PONCET
Il faut donc appeler le script à la fin du "body" (ou, au minimum, juste
après le code html des éléments sur lesquels agit le script).


Merci. Ce que tu dis est logique.

Je vais donc commencer par essayer d'inclure le script dans la méthode
window.onload. Normalement, ainsi, elle ne devrait s'exécuter que
lorsque la page est totalement chargée dans le navigateur.

Je te tiens au courant de ma prise de tête :-)

Mihamina (R12y) Rakotomandimby
Le #732658
tochiro -
Il a dit "tous les navigateurs supportant getElementById".


as-tu une seule fois annoncé le navigateur avec lequel tu testes le code?

Publicité
Poster une réponse
Anonyme