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?
display: none;
e adicionando outra classe comdisplay: block;
? já pensou que isso vai dar conflito?display
apenas sem mudar a classe, tem várias soluções possíveis :)