Question

I use jquery, I have a div visible on a page #section-nav, i’m currently re using some script, at the moment the code make disappear a series of li on hover on #section-nav.

I would need the opposite process so

• the div #li is not visible on load
• only at hover on #section-nav the li became visible
• I would like use toggle effect

I’m really new at jquery, could you post a sample of code? thanks!

<script type="text/javascript">
    $(document).ready(function(){
        $("#section-nav").hover(function () {
        $("li").slideToggle("fast");
    }); }); 
</script>

Answer 1

The div #li ? is it the id or the element type? if it’s the type:

$(document).ready(function() {
    $("li").hide();
    $("#section-nav").hover(function() {
        $("li").slideToggle("fast");
    });
});​

If it’s the id:

$(document).ready(function() {
    $("#li").hide();
    $("#section-nav").hover(function() {
        $("#li").slideToggle("fast");
    });
});​

You can use the $(function(){}) syntax to reduce code:

$(function(){
    $("li").hide();
    $("#section-nav").hover(function() {
        $("li").slideToggle("fast");
    });
});