CODEWITHSUNDEEP
jqueryfocushideshow
njomi_k
njomi_k

Reputation: 37

jQuery one element event influence another

What Im trying to achive is to show/hide one div if input field somewhere is focused. Show works but it wont hide it. Im new to jQuery

I cant figure it out whats wrong in my code.

$(document).ready(function(){

if ($("#a").has(":focus")){
        $("#b").css("visibility","visible");}
    else {
        $("#b").css("visibility","hidden");}
});

html:

   <ul>
<li id="a" >
    <div class="label">
        <label id="company" class="description" for="company">Company</label>
    </div>
    <div class="input">
        <input id="inputcompany" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>
<li id="b" style="visibility: hidden;">
    <div class="label">
        <label class="description" for="company">Name </label>
    </div>
    <div class="input">
        <input id="company" name="company" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
</li>

Sorry guys, secon li should have been with id "b".

Upvotes: 0

Views: 224

Answers (3)

Anjith K P
Anjith K P

Reputation: 2158

Try this,

$('#a input').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});

Upvotes: 1

soyuka
soyuka

Reputation: 9105

I think that your doing it the wrong way if you want to show the next li when hovering the first one, I'll do it like that :

//For example on mouseover the #a
$('#a').on({
    mouseover:function() {
        $('#b').css("visibility","visible"); //we show the #b
    },
    //on mouseleave
    mouseleave: function() {
        if($('#a').find('input').val().length == 0) { //if nothing was entered in the first input
            $('#b').css("visibility","hidden"); //hide the #b
        }
    }
});

See a live example here.

Hope that's help.

Upvotes: 1

Osiris
Osiris

Reputation: 4185

The javascript code will only be executed once. It seems as if you want an event handler - code that will be executed whenever #a loses/gains focus.

$('#a').focus(function() {
  $("#b").css("visibility","visible");
}).blur(function() {
   $("#b").css("visibility","hidden");
});

Upvotes: 2

Related Questions