jQuery slide up/down effect not working on div
<p>Developing ASP.NET Web Forms application using VS 2010 &amp; have a login textbox and password textbox on a page.</p>

<p>Above those I have a simple div tag which will contain the error message if the login textbox or password textbox is empty.</p>

<p><a href="http://jsfiddle.net/d9Wwj/" rel="nofollow">JSFIDDLE</a></p>

<p><code>&lt;div id="ErrorDiv"&gt;&lt;/div&gt;</code></p>

<p>I wanted this div to slide down showing error message if either text box are empty</p>

<p>Following is jQuery code I have tried:</p>

<pre><code>&lt;script&gt;
$(function () {

    $("#btnLogin").click(function () {    
        var error = 0;

        if (error == 0) {
            $("#ErrorDiv").slideToggle();
        }

        if ($("#txtLoginID").val() == "") {   
            error = 1;
            $("#ErrorDiv").text("Please Enter LoginID");
        }

        if ($("#txtPassword").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter Password");
        }

        if (error == 1) {
            alert(document.getElementById("ErrorDiv").value());        
            $("#ErrorDiv").show(); 
        }

        else {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").slideUP();
        }  
    });   
});
&lt;/script&gt;
</code></pre>

<p>This does not work.</p>

<p>I also tried replacing  <code>$("#ErrorDiv").text("Please Enter LoginID");</code> with <code>$("#ErrorDiv").html("Please Enter LoginID");</code> but that had no effect.</p>

<p>What can be the problem?</p>
