AJAX UpdatePanel.Visible Property not working with Javascript

Question

I have code below. I want to hide the update panel by using Javascript (without going to server) when the user clicks Hide button. Although javascript funciton seems to be working fine in debugging, it does not hide!

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<script type="text/javascript" language="javascript">

    function Show() {
        document.getElementById("UpdatePanel1").Visible = true;
    }
    function Hide() {
        document.getElementById("UpdatePanel1").Visible = false;
    }


</script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Button ID="btnShow" runat="server" Text="Show" OnClientClick="Show(); return false;" />
    <asp:Button ID="BtnHide" runat="server" Text="Hide" OnClientClick="Hide(); return false;" />

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <br />
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
            <br />
            <asp:Button ID="btnSubmit" runat="server" Text="Gönder" 
                onclick="btnSubmit_Click" />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

Answer 1

you need to use the UpdatePanel1's client id so

document.getElementById('<%=UpdatePanel1.ClientID%>');