hoverIntent Problems

Question

I'm fairly new to jQuery and I'm trying to set a hoverIntent on 2 different elements on my page. I got it to work on the first one, but when I add it to the second one, it somehow cancels out the first one. Let me know what I'm doing wrong or if there's a better way to format this code.

Thank you in advance.

$(document).ready(function(){
 $(".panel").hoverIntent(function() {
        $(this).children('.info').slideDown();
        }, function() {
        $(this).children('.info').slideUp();
});

});

$(document).ready(function(){
 $(".panel").hoverIntent(function() {
        $(this).children('.info1').slideDown();
        }, function() {
        $(this).children('.info1').slideUp();
});

});

Answer 1

Try this instead:

$(document).ready(function(){
 $(".panel").hoverIntent(function() {
        $(this).children('.info, .info1').slideDown();
        }, function() {
        $(this).children('.info, .info1').slideUp();
});
});