Javascript onclick fade div in (short code)

Question

I look around the place and I can’t find exactly what they are after all.

The html structure is basically.

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

css structure.

#us {display:none}

I would like to see the “us” div change from dipslay: none; to display: a block, in a graceful fade, as few lines of code as possible, and then again, when the link is clicked, to switch back to the: hidden screen.

I know that there are many things that can do this, but they are really looking for this simplicity in the code.

thanks for your time x

Answer 1

.toggle() ( jQuery), :

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

, jQuery 1.4.4+, .fadeToggle() :

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

, <div> <ul>, ... .

Answer 2

- :

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

Answer 3

jQuery fade-toggle, :

$('a').toggle(
    function() { $('#us').fadeIn(); },
    function() { $('#us').fadeOut(); }
);

Answer 4

jQuery UI , . jQuery UI jQuery :

show( effect, [options], [speed], [callback] )

But check the site itself: http://jqueryui.com/demos/show/

Answer 5

Thank you all for your input! You really helped! The last piece that I used, which I find most appropriate, was from Nick.

$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });

so thanks everyone! and hope someone else finds this useful! x