Skip to main content
adicionou 53 caracteres ao conteúdo
Fonte Link
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

Olá!

  Estou tendo dificuldades em fazer com que ao apertar o botão de collapse seja substituído o conteúdo.

Javascript:

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';}

Html:

      <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>
......
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>
... 

Olá!

  Estou tendo dificuldades em fazer com que ao apertar o botão de collapse seja substituído o conteúdo.

Javascript:

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';}

Html:

      <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>
.........

Olá! Estou tendo dificuldades em fazer com que ao apertar o botão de collapse seja substituído o conteúdo.

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>
 

Fonte Link

Substituir conteúdo Collapse

Olá!

Estou tendo dificuldades em fazer com que ao apertar o botão de collapse seja substituído o conteúdo.

Quando clico o conteúdo que já está ativado continua na página e o que eu ativei aparece ou em cima ou embaixo. A minha intenção é fazer a troca e não manter todas as informações juntas.

Clicou, ativou. Clicou em outro, substitui o conteúdo.

Javascript:

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';}

Html:

      <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>
... ... ...