Question

Trying to get this div to disappear, does not seem to doing what I expect it to do, where am I going wrong?

It does not disappear.

Javascript:

<script type="text/javascript">

function Show_Hide_Display() {

    var div1 = document.getElementById("checkAvailability");

        if (div1.style.display == "" || div1.style.display == "block") {
            div1.style.display = "none";
        }
        else {
            div1.style.display = "block";
        }

    return false;
}    

</script>

HTML:

<div runat="server" id="checkAvailability">
    <asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability"     runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
    </asp:LinkButton>
</div>

I want the button to pretty much hide itself.

Answer 1

Change your line to:

var div1 = document.getElementById("<%=checkAvailability.ClientID%>");

The reason is that when the checkAvailability control is rendered on the client side it may or may not have the same id (checkAvailability) since asp.net will prepend its id with that of the container control or some other logic.

This <%=checkAvailability.ClientID%> will always give you the actual id on the client side.