Question

The ultimate goal is to have a div “animate” down when the button is clipped and the “top” is less than 0. I wanted to use a button (for the style) but when I do so, it seems to be posting. Here’s my button:

<button id="expcoll" class="expcoll" onclick="expcoll();" runat="server">↓</button>

Here’s my javascript:

function expcoll() {
    var dFilter = document.getElementById("dFilter");
    var expcoll = document.getElementById("MainContent_expcoll");
    if (dFilter.offsetTop == 0) {
        $("#dFilter").css({ 'top': -200 });
        expcoll.innerHTML = "↓";
    }
    else {
        $("#dFilter").css({ 'top': 0 });
        expcoll.innerHTML = "↑";
    }
}

Can anyone suggest a better way or a way to make it to where the button does not post? If you’re curious as to why I’m trying to use a button, I tried doing mouseenter and mouseleave, but because a few of the textboxes open up jQuery calendars, whenever I do that, the div collapses (yet the calendar stays). I then did a “click” function on the div, but if I clicked in the textboxes, it would close (but the calendar stays). Please let me know if you need anymore information. Thank you very much.

Answer 1

The client-side click event needs to return false to abort the postback. Try adding the following:

<button id="expcoll" class="expcoll" onclick="expcoll();return false;" runat="server">↓</button>

If you can, you should use the ASP.NET button control:

<asp:Button ID="Button1" runat="server" OnClientClick="expcoll();return false;" ...>

EDIT

It might be neater if you just returned false at the end of the function (thanks @Jon Hanna):

function expcoll() { 
    var dFilter = document.getElementById("dFilter"); 
    var expcoll = document.getElementById("MainContent_expcoll"); 
    if (dFilter.offsetTop == 0) { 
        $("#dFilter").css({ 'top': -200 }); 
        expcoll.innerHTML = "↓"; 
    } 
    else { 
        $("#dFilter").css({ 'top': 0 }); 
        expcoll.innerHTML = "↑"; 
    } 
    return false;
} 

<button id="expcoll" class="expcoll" onclick="return expcoll();" runat="server">↓</button>