CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » jQuery Article » Building Collapsible Panel Control using jQuery in ASP.Net Page   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Building Collapsible Panel Control using jQuery in ASP.Net Page

By Satheesh Babu
Posted On Apr 14,2009
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 23
Print this article.
Category: jQuery/ASP.Net

Subscribe to our feed!

Building Collapsible Panel Control using jQuery in ASP.Net Page

 

What is a Collapsible Panel?

It is a technique where we can provide expand/collapse feature to a section of page. Technically, it is nothing but providing expand/collapse feature to a DIV element. So, a page with lengthy content can make use of this feature to display only less content and show the full content on demand. Refer the below figure to understand better.

 

Collapsed Panel

 

Clicking the downward arrow in the above figure will expand its content. Refer the below figure.

Expanded Panel

 

ASP.Net Ajax control toolkit has an extender control called CollapsiblePanel which can be used to make an ASP.Net Panel control to be collapsible panel.

 

In this article, we will create a similar collapsible panel control using DIV tag and jQuery.

Before moving into actual the implementation, it will be better if we know how to integrate the jQuery in our project.  

We will see this in next section.

 

Integrating jQuery

Download the latest jQuery library from jQuery.com and include a reference to the jQuery library file in our ASPX page. Refer below.

 

<script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>

 

Note

I have copied the jquery library into _scripts folder in the solution.

 

To know more and to setup jQuery intellisense in Visual studio 2008, please follow my article - Using JQuery in ASP.Net AJAX Applications – Part 1

 

Constructing Collapsible Panel

To build this control, we will use the same styles and images that are used in building the toolkit’s CollapsiblePanel extender control.

 

Open Visual Studio 2008, Click File >Website and choose ASP.Net Website. Follow the steps in “Integrating jQuery” section [Move Top] to integrate jquery library in the project.

 

Defining Collapsible DIV

Initially, when the page is loaded we will display the content div in collapsed mode. User can expand the content only if he/she requires (On demand).

Collapsible DIV

<div id="ContainerPanel" class="ContainerPanel">

        <div id="header" class="collapsePanelHeader">

            <div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1</div>

            <div id="dvArrow" class="ArrowExpand"></div>

        </div>

        <div id="dvContent" class="Content" style="display:none">

            /*Contents go here.. */

        </div>

    </div>

The div with id “dvArrow” will hold the arrow image to indicate expand or collapse content. The css class “ArrowExpand” will display the arrow image. Clicking this image will expand/collapse the content.

Below, you can find all the css class used above.



ASP.Net Hosting

Recent Articles

 

<style>

/*CollapsiblePanel*/

.ContainerPanel

{

       width:400px;

       border:1px;

       border-color:#1052a0;     

       border-style:double double double double;

}

.collapsePanelHeader

{

       width:400px;

       height:30px;

       background-image: url(images/bg-menu-main.png);

       background-repeat:repeat-x;

       color:#FFF;

       font-weight:bold;

}

.HeaderContent

{

       float:left;

       padding-left:5px;

}

.Content

{

      

}

.ArrowExpand

{

       background-image: url(images/expand_blue.jpg);

       width:13px;

       height:13px;

       float:right;

       margin-top:7px;

       margin-right:5px;

}

.ArrowExpand:hover

{

       cursor:hand;

}

.ArrowClose

{

       background-image: url(images/collapse_blue.jpg);

       width:13px;

       height:13px;

       float:right;

       margin-top:7px;

       margin-right:5px;

}

.ArrowClose:hover

{

       cursor:hand;

}

</style>

 

Next, we will implement the expand/collapse functionality using jquery.

To do this, we will use the toggle function in jquery library to add the expand collapse functionality to the div. Refer the below code.

 

  <script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>

        <script language="javascript">

            $(document).ready(function() {

                $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle(

                function() {

                    $(this).parent().next("div.Content").show("slow");

                    $(this).attr("class", "ArrowClose");

                },

                function() {                   

                    $(this).parent().next("div.Content").hide("slow");

                    $(this).attr("class", "ArrowExpand");

                });             

 

            });           

        </script>

 

In the above code, i have made the element selection using tag name and css class i.e.

 

$("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand”)

 

 By doing the above, i have prevented the selections based on id of the DIV tag because we can use the same code if we have multiple collapsible panel in a page. The toggle function will be attached to all the matched element found for the selector expression in that page and hence the above code will work fine even if we have more than one collapsible panel in a single page. Download the source attached in "Downloads" section and see it in action. Refer the below figure to understand how multiple collapsible panel in a page will look like,

 

Multiple Collapsible panels in a page

 

You can use below HTML to construct the above multiple collapsible panels.

 <div id="ContainerPanel" class="ContainerPanel">

        <div id="header" class="collapsePanelHeader">

            <div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1</div>

            <div id="dvArrow" class="ArrowExpand"></div>

        </div>

        <div id="dvContent" class="Content" style="display:none">

           /*Content*/

        </div>

   </div>

<br />      

   <div id="Div1" class="ContainerPanel">

        <div id="Div2" class="collapsePanelHeader">

        <div id="Div11" class="HeaderContent">jQuery Collapsible Panel2</div>

            <div id="Div3" class="ArrowExpand"></div>

        </div>

        <div class="Content" style="display:none">

            /*Content*/

        </div>

   </div> 

<br />

   <div id="Div4" class="ContainerPanel">

        <div id="Div5" class="collapsePanelHeader">

             <div id="Div12" class="HeaderContent">jQuery Collapsible Panel3</div>

            <div id="Div6" class="ArrowExpand"></div>

        </div>

        <div class="Content" style="display:none">

           /*Content*/

        </div>

    </div>   

<br />

    <div id="Div7" class="ContainerPanel">

        <div id="Div8" class="collapsePanelHeader">

             <div id="Div13" class="HeaderContent">jQuery Collapsible Panel4</div>

            <div id="Div9" class="ArrowExpand"></div>

        </div>

        <div id="Div10" class="Content" style="display:none">

           /*Content*/

        </div>

      </div>

Execute the page to see it in action.

 

Downloads

Download Source

 

Conclusion

Thus, we have seen how to build a simple collapsible panel with div tag and jQuery. I have discussed this article with a static content in the panels. We can also load contents only if the user expands the content using jquery and json i.e. loading the content from server on demand. We will have some future articles on the same. Download the source attached with this article and see it in action.

Happy Coding!!

 

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    collapsible panel state
    Very nice article!! I have one question though,, is it possible to extend such that we can set the expand or collpase mode at time of loading the page. Also save this state to database?
    Save state with postbacks?
    Is there any way to have these panels maintain their expanded/collapsed state on postbacks? In the code shown in this example, any postbacks cause all panels to revert back to the default state of collapsed.
    re:What bout dynamic panel content?
    Its here,
    http://www.codedigest.com/Articles/jQuery/283_Lazy_Loading_jQuery_Collapsible_Panel_in_ASPNet_Using_JSON.aspx
    What bout dynamic panel content?
    You said at the end of the article: "I have discussed this article with a static content in the panels. We can also load contents only if the user expands the content using jquery and json i.e. loading the content from server on demand. We will have some future articles on the same."

    Has these articles been written, and do you have a reference to them?
    Support for Cookies?
    Hi Can you tell us how to support cookies to remember the panel that was opened?
    Expanded by Default
    Great Article. Very helpful. Is there any way to have one of the panels expanded by default? Any help would be greatly appreciated.
    Expanded by Default
    Great Article. Very helpful. Is there any way to have one of the panels expanded by default? Any help would be greatly appreciated.
    ative width
    Works in Firefox, screen blinks only in IE
    Relative width
    If panel width is defined by 100%, it causes screen to blink everytime collapsing / expanding
    RE:Not Working with Ajax
    I have developed a lazy loading feature using the jquery collapsible panel and ajax method in jquery. Read more, http://www.codedigest.com/Articles/jQuery/283_Lazy_Loading_jQuery_Collapsible_Panel_in_ASPNet_Using_JSON.aspx
    Super article!
    Thanks a lot mate! :) Great job!
    Not Working with Ajax
    Hi. Thanks for this brilliant article. it's working fine in normal scenario. but if the content is getting updated by ajax without refereshing the whole page. then click event on up/down image is not getting fired. so it's not working. can you please help me.

    <div id="ContainerPanel" class="ContainerPanel">

    <div id="header" class="collapsePanelHeader">

    <div id="dvHeaderText" class="HeaderContent">jQuery Collapsible Panel1</div>

    <div id="dvArrow" class="ArrowExpand"></div>

    </div>

    <div id="dvContent" class="Content" style="display:none">

    /*Contents go here.. */
    /* Update this content using ajax, without refereshing entire page. then its not working. */
    </div>

    </div>
    Collapsible Panel : Expand and Collapse using Javascript in ASP.NET
    It was quite informative.

    http://www.mindfiresolutions.com/Collapsible-Panel--Expand-and-Collapse-using-Javascript-in-ASPNET-698.php
    Thanks
    Did you read my requirement? this is exactly what I was looking for

    -Jay
    http://www.istwittercrap.com
    Active Panel
    How do I do to get one of the "HeaderContent" to stay active (expandable)
    It Works!
    It works! Good artcile!!
    RE:it does not work
    Hi billy,

    Thanks for your comment! Please let me know if you are getting any error because i have tested the example in IE 7 and firefox.

    Reg your comment on verification no, i can't agree on that any more! And you shld own a site to understand it. I started this site without this CAPTCHA and people who really misusing the technology in the name of spamming forced me to have this. I agree, it is bit lengthy but atleast the characters are clearly visible and many have CAPTCHA which is hard for a human to predict.

    hope you will understand the need of CAPTCHA and it is not an exmaple of technology being misued..
    it does not work
    i clicked and clicked and clicked and not thing happened

    by the way...verification number is the best example of technology being misused... why u need that?... people dont really have time to send in comment....
    Expand/Collapse All
    Can you tell me how to add "Expand/Collapse All" function?
    I just can't sovle it by myself, thanks!

    I wrote these two function:
    function showAll() {
    $("div.Content").show("fast");
    $("div.ArrowExpand").attr("class", "ArrowClose");
    }

    function hideAll() {
    $("div.Content").hide("fast");
    $("div.ArrowClose").attr("class", "ArrowExpand");
    }
    and use buttons to call them.

    It works fine when clicking the button, but there is a bug when I want to toggle content by clicking div: ArrowExpand/ArrowClose.

    what can I do?
    It works fine
    Thanks, a lot.
    RE:Collapsible panel
    Hi Setty,

    I have tried in FireFox 3.x, it works fine...

    Could you please tell me if you are getting any error?
    RE:Collapsible panel
    Setty,
    Thanks for letting me know! I will look into that and update!
    Collapsible panel
    It is not working with firefox 2.x. Please let me know how can i fix.