Trying to toggle one div at a time and hide all others as button is clicked

Question

Here is the HTML divs that I am toggling. They contain iframes and that is essentially what I am showing and not showing based on which buttons I click.

<div class="iframe_div" id="lowerDIV" style="display: none;">
  <iframe width="100%" height="350" src="https://www.youtube.com/embed/V4H3SRnkf94" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>

  <button class="close_iframe_inside" onclick="closeiFrameInner()">
    <i class="fas fa-times"></i>
  </button>
  <span class="close_iframe_inside_text">Close video</span>
</div>

<div class="iframe_div" id="lowerDIV2" style="display: none;">
  <iframe width="100%" height="350" src="https://www.youtube.com/watch?v=_YrbSK9HG8w" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>

  <button class="close_iframe_inside" onclick="closeiFrameInner()">
    <i class="fas fa-times"></i>
  </button>
  <span class="close_iframe_inside_text">Close video</span>
</div>

Here are the buttons in my Html. I am trying to set it up where when I click one button, the associated iframe pops up and all other iframes are toggled hidden.

<div class="icon-bar">
  <ul class="sidebarIcons">
    <li>
      <button onclick="showonlyone()" style="width: 62px;">
        <i class="fa fa-video-camera"></i>
        <span class="tooltipText">Video solution</span>
      </button>
    </li>
    <li>
      <button onclick="showonlyone()" style="width: 62px;">
        <i class="fa fa-percent"></i>
        <span class="tooltipText">Helpful formulas</span>
      </button>
    </li>
  </ul>
</div>

Answer 1

you need to have a parent Div

const parentDiv = document.getElementById('parent-div')
const btAB = document.getElementById('bt-ab')

btAB.onclick=()=>
  {
  btAB.textContent = (parentDiv.classList.toggle('Show-B'))
                    ? 'show A'
                    : 'show B'
  }

#parent-div #div-a { display: block; }
#parent-div #div-b { display: none; }

#parent-div.Show-B #div-a { display: none; }
#parent-div.Show-B #div-b { display: block; }

<button id="bt-ab">show B</button>

<div id="parent-div" class="">
  <div id="div-a">AAAAA</div>
  <div id="div-b">BBBBB</div>
</div> 

If you have more than 2 elements to show / hide use:

const parentDiv = document.getElementById('parent-div')
const btAB = document.getElementById('bt-ab')

const listABCD = ['Show-A','Show-B','Show-C','Show-D']
const nextABCD = ['Show B','Show C','Show D','Show A']
var   itemABCD = 0

btAB.onclick=()=>
  {
  parentDiv.classList.remove(listABCD[itemABCD])
  itemABCD = ++itemABCD % listABCD.length
  parentDiv.classList.add(listABCD[itemABCD])
  btAB.textContent = nextABCD[itemABCD]
  }

#parent-div > div { display: none; }

#parent-div.Show-A #div-a { display: block; }
#parent-div.Show-B #div-b { display: block; }
#parent-div.Show-C #div-c { display: block; }
#parent-div.Show-D #div-d { display: block; }

<button id="bt-ab">Show B</button>

<div id="parent-div" class="Show-A">
  <div id="div-a">AAAAA</div>
  <div id="div-b">BBBBB</div>
  <div id="div-c">CCCCC</div>
  <div id="div-d">DDDDD</div>
</div>

Answer 2

if you are using one function to do the toggle, at least add something to the function or element to distinguish the target, for example adding the target ID

function showonlyone(targetId){
   $('#'+targetId).show(); // show only the element with id=targetId
   $('#'+targetId).siblings().hide(); // hide everything else of the same level as target
}

then in your html

<div class="icon-bar">
  <ul class="sidebarIcons">
    <li>
      <button onclick="showonlyone('lowerDIV')" style="width: 62px;">
        <i class="fa fa-video-camera"></i>
        <span class="tooltipText">Video solution</span>
      </button>
    </li>
    <li>
      <button onclick="showonlyone('lowerDIV2')" style="width: 62px;">
        <i class="fa fa-percent"></i>
        <span class="tooltipText">Helpful formulas</span>
      </button>
    </li>
  </ul>
</div>