javascript onclick fade div in (short code)

Question

i'm been lookin all over the place and cannot find exactly what im after anywhere.

the html structure is basically.

<ul> 
   <li><a href="">link</a></li>
   <div id="us">hidden info</div>
</ul>

the css structure is.

#us {display:none}

I'd like it so when "link" is clicked the div "us" is changed from dipslay:none; to display:block, in a graceful fade in as little lines of code as possible, and then again when the link is clicked its toggled back to display:hidden.

I'm aware that there are lots of things that can do this, but im really lookin for that simplicity in code.

thanks for your time x

Answer 1

You can just use .toggle() with a duration (works in all jQuery versions), like this:

$("ul li a").click(function() { $("#us").toggle("fast"); });

Or, if you're on jQuery 1.4.4+, use .fadeToggle() like this:

$("ul li a").click(function() { $("#us").fadeToggle(); });

Note though, a <div> isn't a valid child of <ul>, so it may render unexpectedly in several browsers...it'd be better to use proper markup.

Answer 2

Something like this:

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});