Как я могу переключаться между двумя разделами, сохраняя один элемент видимым?

Question

var toggles = document.querySelectorAll("[data-toggle-content-section]");
var sections = document.querySelectorAll(".content-bar__section");

var toggleSections = function(event) {
  event.preventDefault();

    sections.forEach(function(elem) {
    console.log(elem) ;

    elem.classList.toggle("active");
  });
};

toggles.forEach(function(elem) {
    elem.addEventListener("click",  toggleSections, ) ;
});

Answer 1

В случае, когда у вас есть n областей, и вы хотите показывать / активировать только одну за раз, почти канонический способ сделать это:

function selectOne(e) {
  document.querySelectAll(".commonClass").forEach(function(elem) {
    //disable element
    elem.disabled = true;
  });
  //enable selected element
  document.getElementById(e.target).disabled = false;
}

Answer 2

В зависимости от вашего HTML вы можете сделать что-то вроде этого: Обратите внимание, что это всего лишь пример, и, возможно, придется изменить его, чтобы отразить вашу собственную разметку

var toggles = document.querySelectorAll("[data-toggle-content-section]");
var sections = document.querySelectorAll(".content-bar__section");

var toggleSections = function(event) {
  event.preventDefault();

  sections.forEach(function(elem) {
    elem.classList.remove("active");
  });
  // get the child element of the just clicked toggle element
  event.target.querySelector('.content-bar__section').classList.add("active");
};

toggles.forEach(function(elem) {
  elem.addEventListener("click", toggleSections);
});

.content-bar__section{
  display: none;
}

.active{
  display: block;
}

<div data-toggle-content-section>
  Headline 1
  <div class="content-bar__section">
    Section 1
  </div>
</div>
<div data-toggle-content-section>
  Headline 2
  <div class="content-bar__section">
    Section 2
  </div>
</div>
<div data-toggle-content-section>
  Headline 3
  <div class="content-bar__section">
    Section 3
  </div>
</div>

Поскольку вы также пометили jQuery здесь одно и то же решение в зависимости от jQuery:

var $toggles = $("[data-toggle-content-section]");
var $sections = $(".content-bar__section");

$toggles.on('click', function() {
  event.preventDefault();

  $sections.removeClass('active');
  $(this).find('.content-bar__section').addClass('active');
});

.content-bar__section {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toggle-content-section>
  Headline 1
  <div class="content-bar__section">
    Section 1
  </div>
</div>
<div data-toggle-content-section>
  Headline 2
  <div class="content-bar__section">
    Section 2
  </div>
</div>
<div data-toggle-content-section>
  Headline 3
  <div class="content-bar__section">
    Section 3
  </div>
</div>