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;}

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;}

• javascript
• jquery
• html
• css
• onclick

• perhaps a full jsfiddle would make it clearer what you are asking for. – Steve0 Commented Sep 20, 2016 at 19:00
• You tagged JS, but there is no JS code, show what have you tired so far. – Mehdi Dehghani Commented Sep 20, 2016 at 19:03
• Wele to SO. Please visit the help center to see how and what to ask. Hint: Show effort and code in a minimal reproducible example – mplungjan Commented Sep 20, 2016 at 19:04
• @MehdiDehghani i dont write js for this things, i want solve in JS . thanks – UDigi Commented Sep 21, 2016 at 10:03
• @UDigi I see, but I think you suppose to try something and then try to get help. I think if you try something (even if could get success) you can learn more about that vs someone do that for you. – Mehdi Dehghani Commented Sep 21, 2016 at 10:11

3 Answers 3

this should work

 $(function() {

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

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>

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./addclass/