Jquery - use focusIn as a trigger to add a class

Question

Jquery - use focusIn as a trigger to add a class

Navigation

#1 by (1 votes)

0

Opa Galera! okay? I'm making a form that should be split into two or more steps ... I had the idea to use a ".hide" class in the second "div" and leave it as "display: none;" in css. Then I put another class with "display: block;" my idea was to put a trigger on the last field of the first div, so when the person was in this field, he would make visible the second 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>

I used addClass, without success. I tried using removeClass before adding and it also did not work. Would he have to rethink the way to do this?

javascript jquery

asked by anonymous 07.08.2018 / 19:03

1 answer

What is the Python function equivalent to Crypt in PHP Find out which function is called in the click

score 1 · Accepted Answer

Selects div for another criterion, an ID for example, and removes one class to add to another, avoiding conflict, because if you remove the class "hide", how does it work if your event is in focusin of the class "hide"?

In the example below, I used an ID in the div, so as not to impact the class to be removed / added.

$('#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><divclass="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>