如何在使用jQuery单击按钮后显示元素？

Question

I when to show a panel when user clicks the button, By default I set panel visibility = false in properties, So when the user clicks the button then the button should hide and that panel should display. How can I achieve this using 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> 

At first I tried to hide a panel by default using jquery like $('#PanelRegisterForm').hide(); . But It's flickering when page is loaded. So then I set visiblity is false.

When i click the button it fade out successfully, But Panel is not visible.

Thanks

Answer 1

That should do it. Remember to add the "fade" class (from bootstrap) to the panel you want to show (or hide). What this does is it's applying opacity: 0 so that your element is hidden, but keeps its dimensions. (if you want to not keep the dimensions, use the class "hidden" instead). Try to avoid using the fadeOut or fadeIn jQuery methods. Use CSS classes instead, it's faster/cleaner.

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

I am not sure if ASP.NET is like Prado (Prado is built basing on ASP.NET idea). If they are same, here is my suggestion/question: Can you check what happen to the Panel when you set Visible = False, is the HTML appear in the html source code of the page?

1. If it's not appear/existed (just like Prado does) then your jQuery code is useless, you have to use CSS solution for it (see 2. below).
2. Another solution is use CSS to hide/show element instead: you can make a CSS class like hidden:

.hidden{ display:none; }

add add it to PanelRegisterForm initialy, then when you want that panel visible, simple use:

$('#PanelRegisterForm').removeClass('hidden')

this will make no flickering because CSS is really fast.