ASP.net (Button)-CodePudding

I want to hide the div, but when I click to hide the div it will show again.

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
    <asp:Button runat="server" ID="Name" CssClass="btn" Text="Add Producd" OnClientClick="toggle()" />
    <script type="text/javascript">
    function toggle() {
        var x = document.getElementById('Workshop');
        if (x.style.display === 'none') {
            x.style.display = 'block'
        }
        else {
            x.style.display = 'none';
        }
    }
    </script>
    <div id="Workshop">
        <h1 style="background-color: red">Test</h1>
    </div>
</ContentTemplate>
</asp:UpdatePanel>

CodePudding user response：

Your asp:Button is causing postback, causing the page to reload with the div in its default display state. You could disable the postback within OnClientClick:

<asp:Button runat="server" ID="Name" CssClass="btn" Text="Add Producd" OnClientClick="toggle(); return false;" />

Or you could use a different control:

<input type="button" name="Name" id="Name" onclick="toggle()"  value="Add Producd" />