How to change attributes of only first child divs within a div

Question

I have this function that that will reset the display attributes of all divs within a div to none then sets the selected one to block.

function Test(id) 
        {
        var allFiles = document.getElementById("FileContainer").getElementsByTagName("div");
        for(i=0; i< allFiles.length; i++)
            allFiles[i].style.display="none";

        var selected = document.getElementById(id);
            selected.style.display="block";
        }

Problem is though that this also sets the display to none for the child divs of the child div as well. How can I make it only apply to the first child level?

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1.1">    //Do not set display to none
    </div> 
    <div id="test-2">        //Set display to none
        <div id="test1.1">  //Do not set display to none
    </div>
</div>

You can set visibility: hidden; for a parent element and show a children element with visibility: visible. Not with display:none. — Sgedda, Dec 28 '18 at 10:00
Wouldn't it be way simpler to just use a CSS rule on FileContainer? Something like: `#FileContainer > div:not(.active) { display: none; }` Then you can make a div visible by just adding the 'active' class. Hiding it again is just selecting the div that has the active class and removing it again. Not a single loop needed. — Shilly, Dec 28 '18 at 10:00

AndrewL64 · Accepted Answer · 2018-12-28T12:01:38.930

Expanding the solution given here, you can either assign the variable allFiles to all direct child divs using the CSS Child Combinator selector ">" like this:

/* JavaScript */
var allFiles = document.querySelectorAll("#FileContainer > div");
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func() {
  allFiles.forEach(div => {
   if (div.id == val.value) {
        div.style.display = "none";
    }
  });
}
  
  btn.addEventListener("click", func);

/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}

<!--HTML-->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle using the CSS Child Combinator selector ">": http://jsfiddle.net/AndrewL64/5nuedztx/20/

Or if you are sure there are no other elements directly under your #FileContainer div that you want to target, you can use the .children property like this:

/* JavaScript */
var allFiles = document.querySelector("#FileContainer").children;
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func(){
  [].forEach.call(allFiles, (div => {
      if (div.id == val.value) {
      div.style.display = "none";
    }
  }))
}

btn.addEventListener("click", func);

/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}

<!-- HTML -->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle using .children : http://jsfiddle.net/AndrewL64/zkgjxhfc/30/

score 1 · Answer 2 · answered Dec 28 '18 at 10:34

Check this

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1-1">
        </div>    //Do not set display to none
    </div> 
    <div id="test-2">        //Set display to none
        <div id="test1-1">  //Do not set display to none
        </div>
    </div>
</div>

<button onclick="Test('test-2')">Click</button>
<script>
        function Test(id){              
          var el = document.querySelectorAll("div#FileContainer > div");

          for (var i = 0; i < el.length; i++){
              //if id != requested id then hide it
              if(el[i].id != id){
                el[i].style.display = "none";
              }

          }

        }
</script>

How to change attributes of only first child divs within a div

2 Answers2