show and hide panel on the click of the asp:button

My panel is originally hidden. I want to show the panel on the click of the <asp:button. Below is my code:

 <asp:Button ID="btnSubmit" runat="server" Text="Submit"  Width="167px" 
             data-icon="check" OnClick="btnSubmit_Click" 
             OnClientClick="showProgress();"     />

My panel code is like so:

 <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" Visible="false">
        <div id="imageDiv">
            <div style="float: left; margin: 9px">
                <img src="Images/loader.gif" id="img1" width="32px"
                     height="32px" style="display:none"/>
            </div>
            <div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
                Loading. Please wait...
            </div>
        </div>
    </asp:Panel>

on button click, I have a javascript function called showProgress() like so:

function showProgress() {
      

            if (Page_IsValid) {
                // panel visible code here
            }

        }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Instead of using Visible = “false” on your panel, use CSS class instead. That visible = “false” will not render the div in the generated html.

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress hidden">
...
</asp:Panel>

function showProgress() {          
    if (Page_IsValid) {
      $("div[name$='pnlPopup']").removeClass("hidden");              
    }
    return false; //To prevent triggering of postback
}

Method 2

You need to add this jquery code and check it’s working fine

Also, please add proper your button id and panel id then after working properly

<script type="text/javascript">
            $(function() {
                $("#btnSubmit").click(function(evt) {
                    evt.preventDefault();
                    $('#pnlPopup').toggle('fast');
                });
            });
    </script>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0