Question

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 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"></script>
<script type="text/javascript">