Try with the following code:

#first{
  display: block; /* <--- change */
}
#second {
  display: none;
}

const firstDiv = document.getElementById("first");
const secondDiv = document.getElementById("second");
document.getElementById("toggle").onclick = function () {
  if (firstDiv.style.display === "none") {
    firstDiv.style.display = "block";
    secondDiv.style.display = "none";
  } else {
    firstDiv.style.display = "none";
    secondDiv.style.display = "block";
  }
}

Correction: you should add event Listener for both toggle & toggletoo.

Solution: solution with reusable code.

const Toggles = document.querySelectorAll('.toggle');
const Hides = document.querySelectorAll('.hide');
Toggles.forEach((el) => {
    el.addEventListener("click", (e) => {
        Hides.forEach((el) => {
            el.parentElement.firstElementChild.classList.add('hide');
        });
        e.target.parentElement.firstElementChild.classList.toggle('hide');
    });

})

.hide {
    display: none;
}

<div>
    <div class="hide">This is the FIRST div</div>
    <button class="toggle">Show first div and hide first div</button>
</div>
<div>
    <div class="hide">This is the SECOND div</div>
    <button class="toggle">Show second div and hide first div</button>
</div>
<div>
    <div class="hide">This is the Third div</div>
    <button class="toggle">Show Third div and hide first div</button>
</div>
<div>
    <div class="hide">This is the Fourth div</div>
    <button class="toggle">Show Fourth div and hide first div</button>
</div>

There's lots of ways to do this. One common way I've seen in various templates is to add and remove classes. Another way is to call the function from the button's onclick attribute. But my favorite is to write a function that requires no editing of the div HTML because I don't want to interfere with the HTML guy's work, I just want to put functioning code in there. (BTW, I am positive there is a more elegant way to write this, but here ya go!)

const firstDiv = document.querySelector("#first");
const secondDiv = document.querySelector("#second");
const firstButt = document.querySelector("#toggle");
const secondButt = document.querySelector("#toggletoo");
firstButt.addEventListener("click",toggleDivShowHide);
secondButt.addEventListener("click",toggleDivShowHide);
function toggleDivShowHide() {
    if (firstDiv.style.display !== "none") {
      firstDiv.style.display = "none";
      secondDiv.style.display = "block";
  } else {
      firstDiv.style.display = "block";
      secondDiv.style.display = "none";
  }
}

You're saying "if the first div is set to none, then set it to block and set the second div to none. Otherwise, do the opposite."

For precisely such cases, javascript has the toggle function. I rewrite your code a little bit.

const btns = document.querySelectorAll(".toggleBtn");

btns.forEach(b => {  
  b.onclick = function (e) {
    reset();
    console.log(e.target.getAttribute('data-target'))
    const target = e.target.getAttribute('data-target');
    const t = document.querySelector('#' + target);    
    t.classList.toggle('hide');    
  }  
});

function reset() {
  const divs = document.querySelectorAll('.out');  
  divs.forEach(d => d.classList.add('hide'))
}

.hide {
  display: none;
}

<div id="first" class="out hide">This is the FIRST div</div>
<div id="second" class="out hide">This is the SECOND div</div>

<button class="toggleBtn" data-target="first">Show first div and hide second div</button>
<button class="toggleBtn"  data-target="second">Show second div and hide first div</button>

I tried something different, this is working :)))

  <div id="first"  style="display:none;"> This is the FIRST div</div>
  <div id="second"  style="display:none;"> This is the SECONDdiv</div>
<input type="button" name="answer" value="Show first div and hide second div" onclick="showDivOne()" />
<input type="button" name="answer" value="Show second div and hide first div" onclick="showDivTwo()" />

function showDivOne() {
   document.getElementById('first').style.display = "block";
  document.getElementById('second').style.display = "none";
}
function showDivTwo() {
   document.getElementById('second').style.display = "block";
  document.getElementById('first').style.display = "none";
}   

https://codepen.io/MaaikeNij/pen/vYeMGyN