How to Expand or Collapse panel when checkbox is checked or unchecked using JQuery with Asp.Net


Here we can learn how to expand or collapse a panel when user check or uncheck the checkbox using JQuery with asp.net

if you are very new to Jquery start from here.

Take a new website and add one webform(file—> new –> website—> asp.net Empty website—> enter website name—> press Ok—> add one webform to root directory)

then add our JQuery library file to the website as shown below

JQueryScripts

add that jquery-1.7.js file to webform and write following code

JQuery Script:

<script type="text/javascript">
        $(function () {
            $("input[id$=chkCollapseExpand]").click(function () {
                if ($(this).attr("checked")) {
                    $("div[id$=pnlCollapsable]").slideDown('slow');
                }
                else {
                    $("div[id$=pnlCollapsable]").slideUp('slow');
                }
            });
        });
    </script>

Total Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=chkCollapseExpand]").click(function () {
                if ($(this).attr("checked")) {
                    $("div[id$=pnlCollapsable]").slideDown('slow');
                }
                else {
                    $("div[id$=pnlCollapsable]").slideUp('slow');
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:CheckBox ID="chkCollapseExpand" runat="server" Text="Show/Hide" />
    <asp:Panel ID="pnlCollapsable" runat="server" Width="400" BackColor="#FF99FF" BorderColor="Fuchsia" BorderWidth="5" Font-Size="X-Large" EnableViewState="True" style="display:none;">
        This is Jquery example for expand and collapse when user clicks on checkbox from https://chikkanti.wordpress.com
    </asp:Panel>
</asp:Content>

Explanation:

$("input[id$=chkCollapseExpand]")

Reading Checkbox Control of type input

$(this).attr("checked")

checking weather check box is checked or not by reading checked attribute

$("div[id$=pnlCollapsable]").slideDown('slow');

reading panel and expanding by calling slideDown method

slow will add little animation to panel while expanding

$("div[id$=pnlCollapsable]").slideUp('slow');

reading panel and Collapsing by calling slideUp method

slow will add little animation to panel while Collapsing

 

OutPut:

Hide Show

=====================================

Happy Coding………..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s