Change Display property on button click with Jquery

Question

I'm trying to load a page where some divs are hidden, looks something like this:

<input type="button" id="btnStats" values="Stats"/>
<div id="dvStats" style="display:none">Stats</div>
<div id="dvAlbums" style="display:none">Albums</div>

Right now divs have just text, since I can't get them to work. I have a JS that assigns dvStats display to click event on btnStats.

$("#btnStats").click($("#dvStats").style.display="block");

Also tried with some methods I saw while searching older questions about this.

$("#btnStats").click($("#dvStats").css(":display","block"));

I haven't been able to make this work. Maybe I missed something.

Solution

Using Jquery you can easily do the above task.Include Jquery Library, and use this code:

$("#btnStats").on("click",function(){

    $("#dvStats").css("display","block")
    $("#dvAlbums").css("display","block")

});

Comments

[Anders Lindén]

Because if click takes an argument, it has to be a function pointer, which you get either by $('#btnStats').click(func); function func() { /*foobar */}, or by $('#btnStats').click(function(){ /*foobar*/ });

[NachoB]

Yeah, I have the latest Jquery file added. Yet, that code line(with css) launches itself without me even clicking on it.