Switch DIV content using only Javascript

Question

Why is it not working after I added this code below? As you can see on snippet. Container #1 is not working when click. I've added title and content on it but it is not showing.

Is there anything that I can use instead of getElementsByTagName?

function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i = 0; i < sel.length; i++) {
    sel[i].style.display = 'none';
  }
  document.getElementById('container' + idInfo).style.display = 'block';
}

#container1,
#container2,
#container3,
#container4 {
  display: none;
  border: 3px solid blue;
  height: 200px;
  overflow: hidden;
}

<div id="linkDiv">
  <a href="#" onclick="showDiv('');return false">Home</a>
  <a href="#" onclick="showDiv('1');return false">link 1</a>
  <a href="#" onclick="showDiv('2');return false">link 2</a>
  <a href="#" onclick="showDiv('3');return false">link 3</a>
  <a href="#" onclick="showDiv('4');return false">link 4</a>
</div>

<div id="container">
  The container I want all content divs to load into... and by default, to show the first container content
</div>

<div id="divLinks">
  <div id="container1">Container #1
    <div>Title</div>
    <div>Content:</div>
    <p>Whole bunch of text 1</p>
  </div>
  <div id="container2">
    Container #2
    <p>Whole bunch of text 2</p>
  </div>
  <div id="container3">
    Container #3
    <p>Whole bunch of text 3</p>
  </div>
  <div id="container4">
    Container #4
    <p>Whole bunch of text 4</p>
  </div>
</div>

Answer 1

You just only need to get Parent children not nested child.

Just modify

var sel = document.getElementById('divLinks').getElementsByTagName('div');

with

sel = document.querySelector('#divLinks').children;

Answer 2

You can use querySelectorAll to target the direct children of divLinks only.

function showDiv(idInfo) {
  const sel = document.querySelectorAll('#divLinks > div');
  
  sel.forEach(item => {
    item.style.display = item.id === `container${idInfo}` ? 'block' : 'none';
  });
}

#container1,
#container2,
#container3,
#container4 {
  display: none;
  border: 3px solid blue;
  height: 200px;
  overflow: hidden;
}

<div id="linkDiv">
  <a href="#" onclick="showDiv('');return false">Home</a>
  <a href="#" onclick="showDiv('1');return false">link 1</a>
  <a href="#" onclick="showDiv('2');return false">link 2</a>
  <a href="#" onclick="showDiv('3');return false">link 3</a>
  <a href="#" onclick="showDiv('4');return false">link 4</a>
</div>

<div id="container">
  The container I want all content divs to load into... and by default, to show the first container content
</div>

<div id="divLinks">
  <div id="container1">Container #1
    <div>Title</div>
    <div>Content:</div>
    <p>Whole bunch of text 1</p>
  </div>
  <div id="container2">
    Container #2
    <p>Whole bunch of text 2</p>
  </div>
  <div id="container3">
    Container #3
    <p>Whole bunch of text 3</p>
  </div>
  <div id="container4">
    Container #4
    <p>Whole bunch of text 4</p>
  </div>
</div>