AJAX UpdatePanel.Visible Property not working with Javascript

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!

<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>

---

you need to use the UpdatePanel1's client id so

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