Bonjour,
J'ai mon code pour afficher ou non un élément selon son ID. Mais ce que j'aimerais faire c'est que la fonction hidden() masque tous les <div> se trouvant dans un <div> parent.
<div id="conteur">
<div id="truc1"></div><div id="truc2"></div>
</div>

function visible(thingId)
{
var visibleElement;
visibleElement = document.getElementById(thingId) ;
visibleElement.style.display = "" ;
}
function hidden(thingId)
{
var hiddenElement;
hiddenElement = document.getElementById(thingId) ;
hiddenElement.style.display = "none" ;
}

Comment faire? Merci de votre lecture

Tu veux dire tous les div d'un autre div ou tous les div qui sont inclus dans un autre div de la page?

Dans tous les cas, il faut que tu commences par sélectionner les div que tu veux cacher.

Si tu veux sélectionner tous les div d'un DIV en particulier, tu peux faire:

var liste = document.getElementById('conteur').getElementsByTagName('div');

Si tu veux sélectionner tous les div contenus dans un autre div de la page, tu peux faire:

var liste = document.querySelectorAll('div div');

Le code que tu places en paramètre de la fonction correspond à des sélections CSS (donc si tu souhaites seulement les div qui sont directement dans un autre div tu peux utiliser le sélecteur: 'div > div')
Attention cependant, ce code n'est pas compatible avec les versions d'IE inférieures à la 8


Si tu veux faire un code compatible avec ces versions, tu peux faire une double boucle, du genre:

var liste1 = document.getElementsByTagName('div');
var x=liste1.length;
while(x--){
  var liste2 = liste1[x].getElementsByTagName('div');
  var y=liste2.length;
  while(y--){
      //tous les éléments présents dans cette boucle sont des div inclus dans d'autre div
      // cacher l'élément liste2[y]
  }
}

Toutefois ce code n'est pas optimisé car si des div sont inclus dans plusieurs div, ces div seront cachés plusieurs fois (ce qui marche mais effectue un travail inutile)

Merci de ta réponse. J'ai tenté ceci mais en vain:

<script>
function visible(thingId)
{
var visibleElement;
visibleElement = document.getElementById(thingId) ;
visibleElement.style.display = "" ;
}
function hidden(thingId)
{
var hiddenElement;
hiddenElement = document.getElementById('conteur').getElementsByTagName('div');
hiddenElement.style.display = "none" ;
}
</script>
<a href="javascript:hidden();visible('1');" class="section">yo</a>
<div id="conteneur">
<div id="1" style="display:none;">1</div><div id="2">2</div><div id="3">3</div><div id="4">4</div>
</div>

euh non, getElementsByTagName retourne une liste de noeuds (c'est pour ça que dans mes exemples j'ai mis var liste=)

En fait, soit tu sais qu'il n'y aura qu'un seul élément et donc tu peux faire:

hiddenElement = document.getElementById('conteur').getElementsByTagName('div')[0];

Mais sinon il va falloir parcourir cette liste pour effectuer la modification sur chaque élément:

var liste = document.getElementById('conteur').getElementsByTagName('div');
var x = liste.length;
var hiddenElement;
while(x--){
  hiddenElement = liste[x];
  hiddenElement.style.display = "none" ;
}

A noter qu'ici je parcours la liste à l'envers (en partant de la fin pour revenir au début). Puisque l'ordre d'exécution n'a pas d'importance, cela n'est pas gênant de parcourir la liste dans ce sens, et cela simplifie un peu l'écriture de la boucle (ceci est un avis personnel)