Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

fechar e abir div com onClick no button

Estou tentando fazer com que quando o botão for clicado ele feche a div atual e abra outra div. Só que meu código só esta fechando a div e não esta abrindo a segunda

         <div class="tab-pane fade" id="novo" role="tabpanel" aria-labelledby="novo-tab">

          <form class= "" name="dados-form" method="post">

            <div id="novoPart1" class="row">
              <div class="col-sm mt-3">
                <h4 style="color:rgba(0,33,77);" class="mt-4 text-center">dados do cliente</h4>
                <hr style="height:2px; border:none; color:#000; background-color:rgba(0,33,77); margin-top: 0px; margin-bottom: 0px;">

                <div class="form-group mt-2">
                  <div class="form-group">
                    <label for="razaoSocial"></label>
                    <input type="email" class="form-control mb-n2" id="razaoSocial" placeholder="razão social">
                  </div>
                  <div class="form-group">
                    <label for="cnpj"></label>
                    <input type="password" class="form-control mb-n2" id="cnpj" placeholder="CNPJ">
                  </div>

                  <div class="form-group">
                    <label for="nomeFantasia"></label>
                    <input type="text" class="form-control mb-n2" id="nomeFantasia" placeholder="nome fantasia">
                  </div>
                  <div class="form-group">
                    <label for="A/C"></label>
                    <input type="text" class="form-control mb-n2" id="A/C" placeholder="A/C">
                  </div>
                  <div class="form-group">
                    <label for="telefone"></label>
                    <input type="text" class="form-control mb-n2" id="telefone" placeholder="telefone">
                  </div>
                  <div class="form-group">
                    <label for="email"></label>
                    <input type="email" class="form-control mb-n2" id="email" placeholder="e-mail">
                  </div>
                </div>
              </div>

essa seria a div para fechar

<div class="d-flex justify-content-center mt-2">
            <button value="form1" onClick="toggle('novo', 'conclusao');" class="btn btn-primary" id="primeiro-form" data-toggle="tab" href="#proximo" role="tab" aria-controls="proximo" aria-selected="true" type="submit" >Finalizar Orçamento</button>
          </div>

          <div id="conclusao" style="display: none;">
            <div class="card text-center" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>

essa a div que devia aparecer junto com o botão

<script>


    function toggle(obj1, obj2) {
      var el = document.getElementById(obj1, obj2);

      if ( el.style.display != 'none' ) {
      el.style.display = 'none';
      }
      else if(el.style.display != 'block'){
      el.style.display = 'block';
      }
    }
  </script>

esse é o script que estou usando `

4 respostas

Olá Natan!

Isso acontece pois quando você clica em um botão de submit ele recarrega a página!

É possivel impedir o recarregamento da página usando o preventDefault();

Para fazer funcionar altere o onClick do seu botão para:

onClick="toggle('conclusao');"

E no seu script:

function toggle(name) {
    div = document.getElementById(name);

    if(div.style.display == "none"){
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }

    event.preventDefault();

}

Espero que tenha ajudado! :D

Bons estudos! ^^

entendi Guilherme, mas dessa forma ele só abriria a div 'conclusao'.

Eu preciso que abra a div 'conclusao' e fecha a 'nova'

solução!

Natan, copiei suas divs e juntei num unico html, reparei que havia algumas tags que não fechavam e isso pode ser um dos motivos de não funcionar.

Também alterei novamente o botão e o script JS.

Quando clica no botão ele some a div "novo" e aparece a div "conclusao";

Quando clica no "Go somewhere" ele some a div "conclusao" e aparece a div "novo".

O código ficou assim:

<div class="tab-pane fade" id="novo" role="tabpanel" aria-labelledby="novo-tab">
    <form class= "" name="dados-form" method="post">
        <div id="novoPart1" class="row">
            <div class="col-sm mt-3">
                <h4 style="color:rgba(0,33,77);" class="mt-4 text-center">dados do cliente</h4>
                <hr style="height:2px; border:none; color:#000; background-color:rgba(0,33,77); margin-top: 0px; margin-bottom: 0px;">
                <div class="form-group mt-2">
                    <div class="form-group">
                        <label for="razaoSocial"></label>
                        <input type="email" class="form-control mb-n2" id="razaoSocial" placeholder="razão social">
                    </div>
                    <div class="form-group">
                        <label for="cnpj"></label>
                        <input type="password" class="form-control mb-n2" id="cnpj" placeholder="CNPJ">
                    </div>
                    <div class="form-group">
                        <label for="nomeFantasia"></label>
                        <input type="text" class="form-control mb-n2" id="nomeFantasia" placeholder="nome fantasia">
                    </div>
                    <div class="form-group">
                        <label for="A/C"></label>
                        <input type="text" class="form-control mb-n2" id="A/C" placeholder="A/C">
                    </div>
                    <div class="form-group">
                        <label for="telefone"></label>
                        <input type="text" class="form-control mb-n2" id="telefone" placeholder="telefone">
                    </div>
                    <div class="form-group">
                        <label for="email"></label>
                        <input type="email" class="form-control mb-n2" id="email" placeholder="e-mail">
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center mt-2">
                <button value="form1" onClick="toggle();" class="btn btn-primary" id="primeiro-form" data-toggle="tab" href="#proximo" role="tab" aria-controls="proximo" aria-selected="true" type="submit" >Finalizar Orçamento</button>
            </div>
        </div>
    </form>
</div>

<div id="conclusao" style="display: none;">
    <div class="card text-center" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="" class="btn btn-primary" onClick="toggle();">Go somewhere</a>
        </div>
    </div>
</div>

<script>
    function toggle() {
    conclusao = document.getElementById("conclusao");
    novo = document.getElementById("novo");

    if(conclusao.style.display == "none"){
    conclusao.style.display = "block";
    novo.style.display = "none";
    } else {
    conclusao.style.display = "none";
    novo.style.display = "block";
    }

    event.preventDefault();

    }

</script>

Espero que te ajude! ^^

Deu certo dessa forma Guilherme, muito obrigado ajudou muito :DD

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software