How do I change the html panel using asp: LinkButton - asp.net

Question

I got a problem where when the button is clicked, the panel would not change. In the sense of error. I can change the panel using the following hyperlink.
Test
But I want to use an asp:LinkButton and it did not work like this.
<asp:LinkButton ID="btngantipassword" runat="server" CssClass="btn btn-lg btn-primary btn-block" href="#" OnClick="$('#panel1').hide(); $('#panel2').show()">Change Password</asp:LinkButton>
I am still a beginner in using asp.net. Help me to solve this problem.

Answer 1

Almost every Control has a Visibility property. This property can be set on the aspx page in the Control itself
<asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
The property can also be set in code behind
Label1.Visible = false;
The visibility property works different than with JavaScript and CSS. Normally if you define a CSS class with display:none for example, you won't see it in the browser but it DOES exist. If you look at the HTML you can find it.
But in asp.net the hidden control is not rendered to the browser and therefore does not exist in the HTML.
To expand this to your question. The Panel Control can be used like you ask in your question.
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server">
<p>Normal Content here...</p>
</asp:Panel>
This will render in HTML as
<div id="Panel1">
<p>Normal Content here...</p>
</div>
With the OnClick event of LinkButton1, you can change the Visibility of Panel1
protected void LinkButton1_Click(object sender, EventArgs e)
{
if (Panel1.Visible == false)
{
Panel1.Visible = true;
}
else
{
Panel1.Visible = false;
}
}