Replace Content Collapse

Question

Hello! I’m having a hard time getting the contents replaced by pressing the Collapse button.

When I click the content that is already activated continues on the page and what I activated appears either on top or bottom. My intention is to make the exchange and not keep all the information together.

Clicked, activated. Clicked on another, replaces the content.

function Conteudo(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none")
    document.getElementById(el).style.display = 'block';
  else
    document.getElementById(el).style.display = 'none';
}

<section class="linhas-esquadros-container" id="navbar">
  <div class="linhas-esquadros" id="linhas-esquadros">

    <form style="display: inline" method="get">
      <button id="btn-essencial" type="button" onclick="Conteudo('container-linha-essencial')" class="on-button-essencial off-button-essencial"><h2>Linha <b>Essencial®</b></h2></button>
    </form>

    <form style="display: inline" method="get">
      <button id="btn-pro" type="button" onclick="Conteudo('container-linha-pro')" class="on-button-pro off-button-pro"><h2>Linha <b>Pro®</b></h2></button>
    </form>

    <form style="display: inline" method="get">
      <button id="btn-premium" type="button" onclick="Conteudo('container-linha-premium')" class="on-button-premium off-button-premium"><h2>Linha <b>Premium®</b></h2></button>
    </form>
  </div>
</section>

<div id="container-linha-essencial" style="display: none">...</div>
<div id="container-linha-pro">...</div>
<div id="container-linha-premium" style="display: none">...</div>

Answer 1

The problem is that you are simply taking the content of div and checking whether it is being displayed or not. To solve the problem the correct one would be to do the following:

function Conteudo(el) {
  const conteudoTexto = document.querySelector('#container-texto');
  for(const filho of conteudoTexto.children) {
    if (filho.id === el)
      filho.style.display = 'block';
    else
      filho.style.display = 'none';
  }
}

<section class="linhas-esquadros-container" id="navbar">
  <div class="linhas-esquadros" id="linhas-esquadros">

    <form style="display: inline" method="get">
      <button id="btn-essencial" type="button" onclick="Conteudo('container-linha-essencial')" class="on-button-essencial off-button-essencial"><h2>Linha <b>Essencial®</b></h2></button>
    </form>

    <form style="display: inline" method="get">
      <button id="btn-pro" type="button" onclick="Conteudo('container-linha-pro')" class="on-button-pro off-button-pro"><h2>Linha <b>Pro®</b></h2></button>
    </form>

    <form style="display: inline" method="get">
      <button id="btn-premium" type="button" onclick="Conteudo('container-linha-premium')" class="on-button-premium off-button-premium"><h2>Linha <b>Premium®</b></h2></button>
    </form>
  </div>
</section>
<div id="container-texto">
  <div id="container-linha-essencial" style="display: none">ESSENCIAL</div>
  <div id="container-linha-pro">PRO</div>
  <div id="container-linha-premium" style="display: none">PREMIUM</div>
</div>

Notice that I added a div around to engage all content, so you can only pick up the desired children within the container-texto, then, in the click event, I take all the children and check if the element I am inside the container is the element referring to the button that was clicked, if it is visible, otherwise it is hidden.