Нажмите на якорь, чтобы открыть скрытый элемент div, а затем скрыть все остальные элементы содержимого?

Question

Я создал 4 контейнера, по которым можно щелкнуть, чтобы показать содержимое внизу.Я хотел бы показать только один скрытый div одновременно.Таким образом, если пользователь щелкает другой контейнер, все остальные скрыты.Текущий Я не могу скрыть ни один из контейнеров, когда они были нажаты.Я действительно ценю любую помощь:)

JS

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'none')
     e.style.display = 'block';
  else
     e.style.display = 'none';
}

CSS

html, body { height: 100%; padding: 0 ; margin: 0; }
a { width: 100%; height: 100%; color: #000; display: block; position: absolute; background: #647070; }
.section { width: 49.9%; height: 49.9%; float: left; position: relative; overflow: hidden; }
#div1, #div3 { border-right: 1px solid black; }
#div3, #div4 { border-top: 1px solid black; }

HTML

  <div id="div1" class="section">
    <div id="festival">
      <a href="#" onclick="toggle_visibility('festival');" style="">Festival&trade;</a>
    </div>
     <p>This is the content of Q1</p>
  </div>

  <div id="div2" class="section">
    <div id="register">
      <a href="#" onclick="toggle_visibility('register');" style="">Register</a>
    </div>
    <p>This is the content of Q2</p>
  </div>

  <div id="div3" class="section">
    <div id="connect">
      <a href="#" onclick="toggle_visibility('connect');" style="">Connect</a>
    </div>
    <p>This is the Q3 content.</p>
  </div>

  <div id="div4" class="section">
    <div id="forth">
      <a href="#" onclick="toggle_visibility('forth');" style="">Forth</a>
    </div>
    <p>This is the Q4 content.</p>
  </div> 

Answer 1

Вы можете добавить что-то вроде этого:

var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
  divsToHide[i].style.display = "block";
}

Это будет циклически проходить по каждому из .section и показывать его прямой div.

Демо

function toggle_visibility(id) {

  var divsToHide = document.querySelectorAll(".section > div")
  for (var i = 0; i < divsToHide.length; i++) {
    divsToHide[i].style.display = "block";
  }
  var e = document.getElementById(id);
  if (e.style.display == 'none')
    e.style.display = 'block';
  else
    e.style.display = 'none';
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

a {
  width: 100%;
  height: 100%;
  color: #000;
  display: block;
  position: absolute;
  background: #647070;
}

.section {
  width: 49.9%;
  height: 49.9%;
  float: left;
  position: relative;
  overflow: hidden;
}

#div1,
#div3 {
  border-right: 1px solid black;
}

#div3,
#div4 {
  border-top: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" class="section">
  <div id="festival">
    <a href="#" onclick="toggle_visibility('festival');" style="">Festival&trade;</a>
  </div>
  <p>This is the content of Q1</p>
</div>

<div id="div2" class="section">
  <div id="register">
    <a href="#" onclick="toggle_visibility('register');" style="">Register</a>
  </div>
  <p>This is the content of Q2</p>
</div>

<div id="div3" class="section">
  <div id="connect">
    <a href="#" onclick="toggle_visibility('connect');" style="">Connect</a>
  </div>
  <p>This is the Q3 content.</p>
</div>

<div id="div4" class="section">
  <div id="forth">
    <a href="#" onclick="toggle_visibility('forth');" style="">Forth</a>
  </div>
  <p>This is the Q4 content.</p>
</div>