Hide/Show div and then hide all div

Question

I am trying to make a "meet the staff" section that has hidden bios that display on click. Right now the div displays as it should, but only disappears when the original button is clicked again. I am needing some additional javascript to hide any opened divs when a different (or same) button is clicked. I don't know enough javascript to know what to try in order to make this happen. Thanks in advance!

HTML

<div id="lastname" class="toggle-div" style="display: none;">
     <div><p>bio</p>
     </div>
</div>
        
<button class="bio-button" onclick="myBiof()">Click for Bio</button>

Javascript

<script>
function myBiof() {
  var y = document.getElementById("lastname");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }
}

</script>

Answer 1

/*
Function to add all the events to the buttons.
Checking if divs are hidden or not with [data-hidden] attribute.
This HMTML attributes can be named however you want but starting 
with data-
Note that this code will only work if every button 
is placed in the HTML after the bio div
*/
function addEventsAndListenToThem() {
  const buttons = document.querySelectorAll('.bio-button')

  buttons.forEach(btn => {
    btn.onclick = (e) => {
      const target = e.target.previousElementSibling
      // If element is hided, show it changing 
      // attribute data-hidden value to false
      target.getAttribute('data-hidden') === 'true' ?
        target.setAttribute('data-hidden', 'false') :
        target.setAttribute('data-hidden', 'true')
    }
  })
  const hide_or_show_all = document.querySelector('.bio-button-all')
  
  // Var to check wether .bio-button-all
  // has been pressed or not
  var showing = false

  hide_or_show_all.onclick = () => {
    // Get al divs with data-hidden property
    const all_bios = document.querySelectorAll('div[data-hidden]')

    showing === false ? (
        () => {
        // Show all divs
          all_bios.forEach(bio => bio.setAttribute('data-hidden', 'false'))
          showing = true
        }
      )() :
      (
      // Hide all divs
        () => {
          all_bios.forEach(bio => bio.setAttribute('data-hidden', 'true'))
          showing = false
        }
      )()
  }
}
addEventsAndListenToThem()

/*
Display none only to [data-hidden="true"] elements
*/

[data-hidden="true"] {
  display: none;
}

.bio-button,
.bio-button-all {
  display: block;
  margin: 10px 0px;
}

<div id="lastname" class="toggle-div" data-hidden='true'>
  <div>
    <p>First bio</p>
  </div>
</div>
<button class="bio-button">Click for first Bio</button>
<div id="lastname" class="toggle-div" data-hidden='true'>
  <div>
    <p>Second bio</p>
  </div>
</div>
<button class="bio-button">Click for second Bio</button>
<div id="lastname" class="toggle-div" data-hidden='true'>
  <div>
    <p>Third bio</p>
  </div>
</div>
<button class="bio-button">Click for third Bio</button>

<button class="bio-button-all">Show/Hide all</button>