How to show an item after clicking a button using jQuery?

Question

I, when I show the panel, when the user clicks the button, By default I set the panel visibility = falsein the properties. Therefore, when the user presses the button, the button should be hidden and this panel should be displayed. How can I achieve this with jQuery?

I tried the following:

$(document).ready(function () {
  //$('#PanelRegisterForm').hide();
  $('#btnRegister').click(function () {
    $('#btnRegister').fadeOut("slow", function(){
   //$('#PanelRegisterForm').attr("visibility","visible");
   //$('#PanelRegisterForm').fadeIn("slow");
   //$('#PanelRegisterForm').show(); 
      $('#PanelRegisterForm').css("visibility", "visible");
    });
  })
});

<div class="container container-max-width">
  <div class="row">
    <div class="panel ">
  <div class="" style="text-align:center;padding-top:50px;">
    <button type="button" class="btn btn-info btn-md" id="btnRegister" >Register</button>
  </div>
  <asp:Panel ID="PanelRegisterForm" class="panel-body" runat="server" Visible="False">
    <div class="form-group">
      <h2 style="text-align: center;">Register</h2>
    </div>
    <div class="form-group">
      <label class="control-label " for="txtCompanyName">Company Name *</label>
      <asp:TextBox ID="txtCompanyName" runat="server" class="form-control required-input"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtCRno">CR Number *</label>
      <asp:TextBox ID="txtCRno" runat="server" class="form-control required-input"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtContactPersonName">Contact Person Name</label>
      <asp:TextBox ID="txtContactPersonName" runat="server" class="form-control"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtMobileNumber">Mobile Number *</label>
      <asp:TextBox ID="txtMobileNumber" runat="server" class="form-control "></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtOfficeTel1">Office Telephone No 1</label>
      <asp:TextBox ID="txtOfficeTel1" runat="server" class="form-control required-input"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtOfficeTel2">Office Telephone No 2</label>
      <asp:TextBox ID="txtOfficeTel2" runat="server" class="form-control "></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtDomain">Domain</label>
      <asp:TextBox ID="txtDomain" runat="server" class="form-control"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtLocation">Location</label>
      <asp:TextBox ID="txtLocation" runat="server" class="form-control" TextMode="MultiLine" Height="150px"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtPostBox">Post Box</label>
      <asp:TextBox ID="txtPostBox" runat="server" class="form-control"></asp:TextBox>
    </div>
    <div class="form-group">
      <label class="control-label" for="txtZipCode">Zip Code</label>
      <asp:TextBox ID="txtZipCode" runat="server" class="form-control"></asp:TextBox>
    </div>
    <div class="form-group">
      <asp:Button ID="btnRegisterSubmit" runat="server" class="btn btn-info btn-block" Text="Register"/>
    </div>
    <p class="form-group">By creating an account, you agree to our <a class="link-hover" href="#">Terms of Use</a> and our <a class="link-hover" href="#">Privacy Policy</a>.</p>
    <hr />
    <p> Already have an account? <a class="link-hover" href="http://sso.godaddy.com/?app=email&realm=pass">Sign in</a> </p>
  </asp:Panel>
     </div>                 
   </div>
</div>    

Run code

At first I tried to hide the default panel using jquery like $('#PanelRegisterForm').hide();. But it flickers when the page loads. So I set the visibility, it's a lie.

When I click the button, it disappears successfully, but the panel does not appear.

thank

Answer 1

. "fade" ( ) , ( ). , , : 0, , . ( , "" ). fadeOut fadeIn jQuery. CSS, /.

$(document).ready(function() {
  $('#btnRegister').click(function() {
    $(this).fadeOut("slow");
    $('#PanelRegisterForm').toggleClass("in");
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div id="PanelRegisterForm" class="fade">
    <div class="form-group">
      <input class="form-control" placeholder="name" />
    </div>
    <div class="form-group">
      <input class="form-control" placeholder="lastname" />
    </div>
  </div>
  <button class="btn btn-primary" id="btnRegister">Button</button>
</div>

Answer 2

, ASP.NET Prado (Prado ASP.NET). , /: , , Visible = False, HTML- HTML- ?

• / ( Prado), jQuery , CSS (. ).
• CSS, / : CSS :

.hidden {     : ; }

PanelRegisterForm initialy, , , , :

$( '# PanelRegisterForm'). RemoveClass ( '')

, CSS .