CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
Joshua
Joshua

Reputation: 822

slideToggle() is not sliding my list item

I want to have the list item with the id "#greenHome" slide in when the list item with the id "#home" is being hovered over. It is not working for me and I can't figure out why.

HTML:

<ul id="nav_animations">
    <li id="greenHome"></li>
</ul>
<ul id="navlist">
    <li id="home">Home</li>
</ul>

JavaScript:

$('#home').hover(function(){
        ('#greenHome').slideToggle('slow');
});

CSS:

#greenHome {
    display:none;
}


https://jsfiddle.net/JoshuaHurlburt/etehjeaq/

PS: This is not my full code, I can post it though if need be.

Upvotes: 1

Views: 59

Answers (1)

Zolt&#225;n Tam&#225;si
Zolt&#225;n Tam&#225;si

Reputation: 12754

First of all, you have missed the jQuery function name $ from your call to slideToggle. It's correctly like this:

$('#greenHome').slideToggle('slow');

Also, you have completely messed up the jsFiddle, I've corrected it and at the link below you can see the updated, working sample. In the fiddle you shouldn't use <head> tag, and you should select inclusion of jQuery at the left settings panel.

Also, I've changed the order of your lists for demo purposes, because hover event was firing multiple times when the hovered item was pushed down by the toggling element above it.

And finally as others have pointed out in the comments, I filled the text "Green home" to the corresponding <li> because if it remained empty you of course wouldn't see any effect.

Working Demo

Upvotes: 2

Related Questions