CODEWITHSUNDEEP
javascriptjquery
Jennifer Aniston
Jennifer Aniston

Reputation: 613

hide and show doesn't work with hover()?

I can see the hover() is working but it doesn't hide and show the contact_numbers class? What's wrong in my code?

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log('in')
  }, function() {
    $(this).find('.contact_numbers').remove()
    console.log('out')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
    <li>999</li>
    <li>888</li>
  </div>
</li>

Upvotes: 0

Views: 158

Answers (6)

K K
K K

Reputation: 18099

You have wrong html markup in your body which is rendered differently as compared to what you expect. Below is the rendered html:

<ul>
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
 <span class="call_txt">Call Us Now</span>

        <div class="contact_numbers"></div>
    </li>
    <li>999</li>
    <li>888</li>
</ul>

So clearly the .contact_numbers div doesn't have anything to hide and show and probably this is the reason why you are not getting expected results. Correct your html and then try.

You can check the rendered html in the console in this demo Demo: http://jsfiddle.net/GCu2D/929/

Make sure you use .hide() and .show() or .toggle() as in this demo: Demo with correct markup: http://jsfiddle.net/GCu2D/930/

JS:

$(function () {
    $("#hdCallUs").hover(function () {
        $(this).find('.contact_numbers').show();
        console.log('in', $(this).find('.contact_numbers'))
    }, function () {
        $(this).find('.contact_numbers').hide()
        console.log('out', $(this).find('.contact_numbers'))
    });
});

HTML:

<ul>
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
 <span class="call_txt">Call Us Now</span>

        <div class="contact_numbers">
            <ul>
                <li>999</li>
                <li>888</li>
            </ul>
        </div>
    </li>
</ul>

Upvotes: 0

cakan
cakan

Reputation: 2117

Your HTML is broken, you are missing <ul> tag. Try this code:

$(function() {
  $("#hdCallUs").hover(function() {
    $('.contact_numbers').show(); <!-- changed this -->
  }, function() {
    $('.contact_numbers').hide()
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers" style="display:none">
  <ul>  <!-- added this -->
    <li>999</li>
    <li>888</li>
  </ul>
  </div>
</li>

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

That's because you have invalid html. You have to wrap your second level lis inside ul. li cannot have lis as its children and also, display:none; to your contact_numbers + do not remove it on hover out, instead just hide it. remove removes it permanently from DOM.

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log('in')
  }, function() {
    $(this).find('.contact_numbers').hide()
    console.log('out')
  });
});
.contact_numbers{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
    <ul>
      <li>999</li>
      <li>888</li>
    </ul>
  </div>
</li>

Upvotes: 0

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

I don't understand the structure of your html (li inside a div without ul?) but you can achieve this without javascript and just css like this:

.contact_numbers{
   display: none;
}

#hdCallUs:hover .contact_numbers{
   display: block;
}

Upvotes: 0

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

because of wrong Dom structure in your html

<ul> is missing inside <div class="contact_numbers"> how can a <li> start without <ul>

and in your question you write hide and show doesn't work with hover()? than why .remove() in your code if you want to hide your element use .hide() see my code 

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log($(this).find('.contact_numbers'))
  }, function() {
    //$(this).find('.contact_numbers').remove() // this will remove element 
   $(this).find('.contact_numbers').hide() // this will hide
    console.log('out')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
      <ul>
    <li>999</li>
    <li>888</li>
      </ul>
  </div>
</li>
</ul>

Upvotes: 2

Pavel Golovan
Pavel Golovan

Reputation: 64

Seems like you are removing the element on hover out.

$(this).find('.contact_numbers').remove();

Is it expected? To hide element change this to:

$(this).find('.contact_numbers').hide();

Upvotes: 0

Related Questions