Make div appear with jQuery

Question

Hello,

I have a div that is hidden and being declared this way:

<div id="divLogin" style="visibility:hidden;">

My idea is to use jquery to make it slide in

so I created this code:

$("btEnviarAcesso").click(function ()
{
    $("divLogin").slideToggle("slow");
});

but it is not working... Does someone have any ideia why??

Answer 1

You need a pound sign (#) to identify things by their id attribute, which uses the id selector. Try this instead:

$("#btEnviarAcesso")...

and:

... { $("#divLogin").slideToggle("slow"); });

Also, jQuery's show/hide functions don't affect the visibility attribute. Instead, use "display: none" for your element's style.

Answer 2

if you are using ID in your html, use # in the query name:

$("#btEnviarAcesso").click(function () { $("#divLogin").slideToggle("slow"); });

Answer 3

Your selector is no good, btEnviarAcesso is not an element. It probably needs to be #btEnviarAcesso if it is an id or a .btEnviarAcesso if it is a class.

Answer 4

You are using visibility:hidden to hide the div but the jQuery show functions don't adjust visibility. I would suggest doing this:

<div id="divLogin" style="display: none">

And then change your code to this:

$("#btEnviarAcesso").click(function () {
    $("#divLogin").slideToggle("slow");
});

This assumes an element with the ID of btEnviarAcesso that can take the click event.

EDIT: Make sure you put that code inside a document.ready function:

$(document).ready(function(){ // Or $(function(){ ...
    $("#btEnviarAcesso").click(function () {
        $("#divLogin").slideToggle("slow");
    });
});

You can see this solution working in this demo.

Edit 2

Replace this:

<script src="jquery-1.3.2.min.js"/>
<script language="javascript">

With this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">