how to show hide div on focus input

Question

How to show hide div upon existing div, existing div should be hide.

My existing div

<div class="container">
<div class="row">
<input class="abc" type="text" />
</div>
</div>

My Hide Div which are i want show on click action

<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>

css

.newone{ position:absolute; left:0; right:0; top:0px; display:none;}

Answer 1

You can use the focus and focusout events of an input to hide and show a related message using javascript:

 var input = document.getElementById('myinput'); var message = document.getElementsByClassName('newone')[0]; input.addEventListener('focus', function() { message.style.display = 'block'; }); input.addEventListener('focusout', function() { message.style.display = 'none'; }); 

 .newone { display:none; } 

 <div class="container"> <div class="row"> <input class="abc" type="text" id='myinput'/> </div> </div> <div class="container"> <div class="row"> <span>some text here </span> <span>some text here</span> </div> </div> <div class="container newone"> <div class="row"> <span>some text here</span> </div> </div> 

Answer 2

this should work

 $(function() {

    $(".abc").focusin(function() {
        $(".newone").show();
    }).focusout(function () {
        $(".newone").hide();
    });
});

Answer 3

You could use addClass to hide the div using jQuery, Please refer the below code.

$( ".container" ).addClass( "newone" );

For more info please refer the below url

https://api.jquery.com/addclass/