Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Afficher/cacher des bouts de code HTML

7 réponses
Avatar
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

7 réponses

Avatar
Pascal PONCET
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">
<li>élément 1...</li>
<li>élément 2...</li>
<li>élément 3...</li>
</ul>
<h3 id="titre_2">Titre de la liste 2</h3>
<ol id="liste_2">
<li>élément A...</li>
<li>élément B...</li>
<li>élément C...</li>
</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.

Avatar
tochiro
On Fri, 06 Apr 2007 20:03:19 +0200, Pascal PONCET
wrote:

<h3 id="titre_1">Titre de la liste 1</h3>
<ul id="liste_1">
<li>élément 1...</li>
<li>élément 2...</li>
<li>élément 3...</li>
</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...

Avatar
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?

Avatar
tochiro
On Fri, 06 Apr 2007 21:28:16 +0200, "Mihamina (R12y) Rakotomandimby"
wrote:

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">
<li>mon premier item.</li>
<li>mon deuxième item.</li>
</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");
}


Avatar
Pascal PONCET
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

Avatar
tochiro
On Fri, 06 Apr 2007 23:25:21 +0200, Pascal PONCET
wrote:
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 :-)

Avatar
Mihamina (R12y) Rakotomandimby
tochiro - :

Il a dit "tous les navigateurs supportant getElementById".


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