If you want to just show and hide your Panel using jQuery, you can use something like the following :
<script type='text/javascript'>
$(document).ready(function(){
<!-- When your checkbox is clicked -->
$("#<%= yourCheckbox.ClientID").click(function () {
<!-- Toggle the Visibility of your Panel -->
$("#<%= yourPanel.ClientID %>").toggle();
});
});
</script>
If you wanted to add a bounce effect, you would need to use something like the jQueryUI library as well (which features the necessary extensions to add the bounce effect), however it would not change your code substantially :
<!-- Add jQuery Reference (Example) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- Your Script -->
<script type='text/javascript'>
$(document).ready(function(){
<!-- When your checkbox is clicked -->
$("#<%= yourCheckbox.ClientID").click(function () {
<!-- Toggle the Visibility with a "bounce effect" -->
$("#<%= yourPanel.ClientID %>").toggle("bounce", { times: 1 });
});
});
</script>
edit: syntax error is because you forget %> at the end of checkbox «.clientid but this code wont work i thin i have to ceheck for checked status and not clicked because is a checkbox.
You are right about forgetting the closing tag. The click function should work just fine, although you can also use
.change() if you would prefer and you can use the .is()
function to determine if the box is checked or not :
You can also pass a boolean value to the .toggle() method to determine if the item show be hidden or shown :
<script type="text/javascript">
$(document).ready(function(){
$("#<%= cb_patrocinar.ClientID %>").change(function(){
//This will toggle the element based on the checkbox value
//You can use $("#<%= Panel1.ClientID %>").toggle(this.checked); as well
$("#<%= Panel1.ClientID %>").toggle($(this).is(':checked'));
});
});
</script>
troika
Member
14 Points
191 Posts
jquery show hide panel
Mar 05, 2013 10:47 PM|LINK
i want to show/hide a server panel so i should use panel.clientid, if checkbox is check show panel else hide it, and with bunce effect
Rion William...
All-Star
27748 Points
4580 Posts
Re: jquery show hide panel
Mar 05, 2013 10:59 PM|LINK
Toggling Visibility using jQuery
If you want to just show and hide your Panel using jQuery, you can use something like the following :
<script type='text/javascript'> $(document).ready(function(){ <!-- When your checkbox is clicked --> $("#<%= yourCheckbox.ClientID").click(function () { <!-- Toggle the Visibility of your Panel --> $("#<%= yourPanel.ClientID %>").toggle(); }); }); </script>Example
Toggling Visibility with "Bouncing"
If you wanted to add a bounce effect, you would need to use something like the jQueryUI library as well (which features the necessary extensions to add the bounce effect), however it would not change your code substantially :
<!-- Add jQuery Reference (Example) --> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <!-- Your Script --> <script type='text/javascript'> $(document).ready(function(){ <!-- When your checkbox is clicked --> $("#<%= yourCheckbox.ClientID").click(function () { <!-- Toggle the Visibility with a "bounce effect" --> $("#<%= yourPanel.ClientID %>").toggle("bounce", { times: 1 }); }); }); </script>Example with Bouncing
troika
Member
14 Points
191 Posts
Re: jquery show hide panel
Mar 05, 2013 11:18 PM|LINK
i'm getting syntax error with both codes
Rion William...
All-Star
27748 Points
4580 Posts
Re: jquery show hide panel
Mar 06, 2013 02:06 AM|LINK
bruce (sqlwo...
All-Star
36852 Points
5446 Posts
Re: jquery show hide panel
Mar 06, 2013 05:03 AM|LINK
$.toggle() is deprecated (and not included in 1.9) and should not be used.
Rion William...
All-Star
27748 Points
4580 Posts
Re: jquery show hide panel
Mar 06, 2013 05:41 AM|LINK
@bruce
The .toggle() being used in this context should work just fine and hasn't been deprecated.
I think you a referring to the .toggle() function relating to events (which was deprecated in 1.8 and removed in 1.9) and not the .toggle() relating to showing and hiding elements (this one).
troika
Member
14 Points
191 Posts
Re: jquery show hide panel
Mar 06, 2013 08:12 AM|LINK
anyway i still get syntax error.
edit: syntax error is because you forget %> at the end of checkbox «.clientid but this code wont work i thin i have to ceheck for checked status and not clicked because is a checkbox.
also do i need to put some code on
CheckedChanged event?
tried this also but panel wont show:
<script type="text/javascript"> $(document).ready(function(){ $("#<%= cb_patrocinar.ClientID%>").change(function(){ var checked = $(this).attr('checked'); if (checked) { $("#<%= Panel1.ClientID %>").show(); } else { $("#<%= Panel1.ClientID %>").hide(); } }); }); </script>Rion William...
All-Star
27748 Points
4580 Posts
Re: jquery show hide panel
Mar 06, 2013 11:48 AM|LINK
Oops.
You are right about forgetting the closing tag. The click function should work just fine, although you can also use .change() if you would prefer and you can use the .is() function to determine if the box is checked or not :
<script type="text/javascript"> $(document).ready(function(){ $("#<%= cb_patrocinar.ClientID %>").change(function(){ if ($(this).is(':checked')) { $("#<%= Panel1.ClientID %>").show(); } else { $("#<%= Panel1.ClientID %>").hide(); } }); }); </script>You can also pass a boolean value to the .toggle() method to determine if the item show be hidden or shown :
<script type="text/javascript"> $(document).ready(function(){ $("#<%= cb_patrocinar.ClientID %>").change(function(){ //This will toggle the element based on the checkbox value //You can use $("#<%= Panel1.ClientID %>").toggle(this.checked); as well $("#<%= Panel1.ClientID %>").toggle($(this).is(':checked')); }); }); </script>troika
Member
14 Points
191 Posts
Re: jquery show hide panel
Mar 06, 2013 01:32 PM|LINK
also with that code i click on the checkbock and nothinh happends when i checked it it should show the panel.
generated code:
<head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> <script src="../js/jquery-ui-1.10.1.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#ContentPlaceHolder4_cb_patrocinar").change(function () { if ($(this).is(':checked')) { $("#ContentPlaceHolder4_Panel1").show(); } else { $("#ContentPlaceHolder4_Panel1").hide(); } }); }); </script> </head>prabu.raveen...
Contributor
5022 Points
956 Posts
Re: jquery show hide panel
Mar 06, 2013 01:37 PM|LINK
Try as below,
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="flow"> <asp:ListItem Value="true">Show</asp:ListItem> <asp:ListItem Value="false">Hide</asp:ListItem> </asp:RadioButtonList> <asp:Panel ID="Panel1" runat="server"> <asp:Label ID="Label1" runat="server">Asp panel content</asp:Label> </asp:Panel> </div> </form> </body> <script type="text/javascript"> $('#<%= RadioButtonList1.ClientID %>').find('input:radio').click(function() { if ($(this).next().html() == 'Show') { $('#<%= Panel1.ClientID %>').show('slow'); } else if ($(this).next().html() == 'Hide') { $('#<%= Panel1.ClientID %>').hide('slow'); } }); </script> </html>