The Ajax Control Toolkit has a Collapse Panel Control Extender [ see HERE ] that allows you to hide or show sections of content in your web page. This ability can be very useful as we evolve our UIs more toward “Single Page” interfaces.

There are many ways to accomplish this using jQuery and I’ve chosen a slick little plugin by Darren Ingram [ get it HERE ]

The UI behavior is simple. We have a set of content in a container (a div in this case)

When the user clicks on the title bar the container collapses leaving only the title bar.

The code is simple becuase the PlugIn does all the work for us.


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

<asp:Content ID='HeaderContent' runat='server' 
                                ContentPlaceHolderID='HeadContent'>
<link href='Styles/jquery-ui-1.8.13.custom.css' rel='stylesheet' 
                                                type='text/css' />
</asp:Content>

<asp:Content ID='BodyContent' runat='server' 
                              ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit 
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <div class='collapsibleContainer' title='Example Collapsible Panel'>    
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
	varius ullamcorper lacus, ac pharetra libero commodo eu. Aenean auctor 
	imperdiet libero, sit amet scelerisque lorem placerat quis. Phasellus 
	pretium, lacus eget euismod cursus, nunc nibh semper urna, at blandit 
	elit nisl non dui. Sed blandit dignissim tellus, in egestas orci 
	facilisis vel. Curabitur consequat ante vel mauris accumsan rutrum. 
	Aliquam lorem est, ornare eget mollis sit amet, vestibulum et diam. 
	Phasellus cursus massa sodales metus luctus sed blandit quam rhoncus. 
	Proin nunc risus, scelerisque eu sagittis in, gravida vitae lectus. 
	Maecenas et ipsum ac mauris condimentum accumsan ac et ligula. 
	Phasellus mattis, tortor quis rutrum mollis, ante eros dictum 
	leo, ac venenatis augue nisl sit amet mauris. Maecenas cursus, arcu nec
	egestas molestie, leo lectus pellentesque sapien, eu sollicitudin urna 
	dolor vitae nisl. Proin lobortis, tortor quis congue lacinia, arcu elit
	consequat erat, vestibulum aliquet lorem massa sed leo. Suspendisse 
	volutpat odio in mauris cursus aliquam. Nullam sed sapien sit amet mi 
	laoreet sagittis. Integer rutrum lacus quis felis venenatis porta. 
	</p>
    </div>  
           
    <script src='Scripts/jquery-1.4.1.js' type='text/javascript'></script>
    <script src='Scripts/jquery-ui-1.8.1.custom.min.js' 
	             type='text/javascript'>
    </script>
    <script src='Scripts/diQuery-collapsiblePanel.js' 
	             type='text/javascript'>
    </script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $('.collapsibleContainer').collapsiblePanel();
        });
    </script>                         
</asp:Content>


In the example above the collapsable dic contains a text paragraph but try it with ASP.NET controls and you’ll find it works the same way.

Have fun !