0

Opa Galera! tudo bem? Estou fazendo um formulário que deve ser dividido em duas ou mais etapas... eu tive a ideia de usar uma classe ".hide", na segunda "div" e deixar ela como "display: none;" no css. ai eu coloquei uma outra classe com "display: block;" a minha ideia, foi colocar um gatilho no último campo da primeira div, para quando a pessoa estivesse neste campo, ele deixasse visível a segunda div.

$('#trigger').focusin(function(){
    $('.hide').addClass('isActive');

})
form{
    border: 1px solid black;
    border-radius: 5px 5px;
    padding: 80px;
}

div{
    padding: 30px;
}

.hide{
    display: none;
}

.isActive{
    display: block;
}
<form>

            <div class="first">
                Nome completo:<input type="text">
                dados:<input type="text">
                dados:<input type="text"/>
                dados:<input id="trigger" type="text"/>
                
            </div>

            <div class="hide">
                dados:<input type="text"/>
                dados:<input type="text"/>
                dados:<input type="text"/>
                dados:<input type="text"/>
            </div>
                
</form>

Usei o addClass, sem sucesso. Tentei usar o removeClass antes de adicionar e também não deu certo. Será que teria que repensar a maneira de fazer isso?

5
  • eu tentei isso também:$('#trigger').focusin(function(){ $('div').removeClass('.hide').addClass('isActive'); });
    – MSHijo
    Commented 7/08/2018 às 17:08
  • 1
    mas você está pegando um elemento com a classe "hide" que está com display: none; e adicionando outra classe com display: block;? já pensou que isso vai dar conflito? Commented 7/08/2018 às 17:16
  • Pô cara, brigadão! mas ai eu fiz o seguinte... tirei o "display" da classe "isActive" e mudei o jquery para : "$('#trigger').focusin(function(){ $(div).removeClass('hide') })" não rodou também, eu tenho quase certeza que estou fazendo de uma forma burra...
    – MSHijo
    Commented 7/08/2018 às 17:37
  • 1
    eu coloquei um exemplo com uma sugestão abaixo. Você poderia também simplesmente mudar o display apenas sem mudar a classe, tem várias soluções possíveis :) Commented 7/08/2018 às 18:06
  • é Então, eu percebi que nem precisava da classe "isActive", só excluir o ".hide" já resolve... vc diz mudar o "display" usando o ".css()"?
    – MSHijo
    Commented 7/08/2018 às 18:23

1 Resposta 1

1

Seleciona o div por outro critério, um ID por exemplo, e remove uma classe a adiciona a outra, evitando o conflito, porque se você remover a classe "hide", como funciona se seu evento é no focusin da classe "hide"?

No exemplo abaixo, usei um ID na div, para não impactar na classe que será removida/adicionada.

$('#trigger').focusin(function(){
  $('#divHide').removeClass('hide');
  $('#divHide').addClass('isActive');
})

$('#trigger').focusout(function(){
  $('#divHide').removeClass('isActive');
  $('#divHide').addClass('hide');
})
form{
    border: 1px solid black;
    border-radius: 5px 5px;
    padding: 80px;
}

div{
    padding: 30px;
}

.hide{
    display: none;
}

.isActive{
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="first">
    Nome completo:<input type="text">
    dados:<input type="text">
    dados:<input type="text"/>
    dados:<input id="trigger" type="text"/>

  </div>

  <div id="divHide" class="hide">
    dados:<input type="text"/>
    dados:<input type="text"/>
    dados:<input type="text"/>
    dados:<input type="text"/>
  </div>
</form>

2
  • foda!!! eu estava chamando ele pela classe que eu ia excluir, tava "garoteando"
    – MSHijo
    Commented 7/08/2018 às 18:18
  • Muito obrigado pela ajuda Ricardo!!!Vou continuar os estudos!
    – MSHijo
    Commented 7/08/2018 às 18:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .