Faisal Faisal - 1 month ago 13
Javascript Question

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

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

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>

Comments