Cacher plusieurs balises au chargement de la page

**nanar21** · 07/10/2016, 12h54

Bonjour,

Pour cacher un élément (une balise aside ayant comme id="today"), ce code fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("today").style.display="none"; // OK

Mais pour cacher toutes les balises aside, ce code ne fonctionne pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName("aside").style.display="none";

J'ai tenté le code suivant, (mais il ne fonctionne pas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var tab_aside=document.getElementsByTagName("aside");
for (x in tab_aside) { x.style.display="none";}

Pourriez-vous m'aider ?
Je voudrais cacher plusieurs balises d'un coup au chargement de la page

D'avance merci

**Beginner.** · 07/10/2016, 17h35

Tu as des balises <aside></aside> dans ton html ? Je ne sais pas si c'est une bonne idée mais peut-être que ce serait mieux de travailler avec des balises connues et ajouter par exemple une class ".aside"...

Je ne sais pas si on peut appliquer du css classique à une balise inconnue juste comme ça sans ajouter quelque chose (j'ai vu qu'on pouvait faire des balises personnalisées)...

Invité · 07/10/2016, 17h41

Bonjour,

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var tab_aside = document.getElementsByTagName("aside");
for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }

ou :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var tab_aside = document.getElementsByTagName("aside");
for (x of tab_aside) { x.style.display="none"; }

Voir for(... of ...) (et pas for(...in...))

Pour peu que tu utilises jQuery, ça devient :

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('aside').hide();

**Beginner.** · 07/10/2016, 17h49

Ah je viens de tester et oui apparemment on peut utiliser n'importe quelles balises ! Je ne savais pas ça...

Invité · 07/10/2016, 17h52

@Beginner.

La balise <aside> EST BIEN une balise HTML5 !

HTML5 : le guide du débutant

**Beginner.** · 07/10/2016, 17h57

Ah merci, je ne la connaissais pas ! Ceci dit j'ai essayé aussi <asidea> et ça marche aussi sauf qu'elle est considérée apparement comme une balise inline...

**nanar21** · 08/10/2016, 07h09

Merci, pour le bon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var tab_aside = document.getElementsByTagName("aside");
for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }

Cela fonctionne avec un for "classique"

**nanar21** · 08/10/2016, 08h08

Cacher le contenu de plusieurs balises au chargement de la page HTML est utile si on veut voir que le titre de plusieurs notes. Par exemple, une page contenant toutes les choses à faire !

Un clic sur un titre et la note s'affiche. Un double-clic sur le contenu de la note et le contenu disparaît.

Voici le code d'une telle page HTML (Le javascript discuté ci-dessus se trouve en bas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <style>
    body{ font-family: Verdana, Arial, Helvetica;
     background-color: gray; color: black;}
 
    aside { background-color: #96dc97;
    border-radius: 20px; padding: 5px; margin: 5px;}
    </style>
    <title>
      To do
    </title>
  </head>
  <body>
    <p>
      Cliquez sur le titre pour afficher le contenu.<br>
      Double-cliquez sur le contenu pour le cacher.
    </p>
    <h1 onclick=
    "document.getElementById('today').style.display='block'">
      A faire rapidement
    </h1>
    <aside id="today" ondblclick="style.display='none'">
      <p>
        Le Lorem Ipsum est simplement du faux texte employé dans la
        composition et la mise en page avant impression. Le Lorem
        Ipsum est le faux texte standard de l'imprimerie depuis les
        années 1500.
      </p>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note2').style.display='block'">
      En mathématiques
    </h1>
    <aside id="note2" ondblclick="style.display='none'">
      <ul>
        <li>Apprendre par coeur les tables de multiplication
        </li>
        <li>Tracer une perpendiculaire à l'aide d'une latte et d'un
        compas
        </li>
      </ul>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note3').style.display='block'">
      En Français
    </h1>
    <aside id="note3" ondblclick="style.display='none'">
      <ul>
        <li>Lire "Tintin : Objectif Lune"
        </li>
        <li>Apprendre la dactylographie (taper avec ses dix doigts)
        </li>
      </ul>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note4').style.display='block'">
      Préparation des vacances
    </h1>
    <aside id="note4" ondblclick="style.display='none'">
      <p>
        Mettre dans la valise :
      </p>
      <ul>
        <li>...
        </li>
        <li>...
        </li>
      </ul>
    </aside><!--=========================================-->
    <script type="text/javascript">
        var tab_aside=document.getElementsByTagName("aside");
        for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }
    </script>
  </body>
</html>