Replacing the Ajax Control Toolkit’s Accordion control with jQueryUI

Accordion style containers are a great way to maximize the use of your browser based screen real estate.

Note the UI and behavior of an Accordion Content Control.

The default display looks like this.

Clicking on the second header bar closes the first content area and opens the second.

Some time ago I did a video on using Accordions with the ASP.NET AJAX Control Toolkit. You can check it out here.

The thing about accordion controls is the the content exists in HTML <div> elements which means we can populate them with static markup, server side controls, of even markup retrieved by way of an AJAX service method call and inserted by our client side JavaScript code.

There are many JavaScript libraries and jQuery Plug-Ins that can assist us in implementing an accordion container. In this case I’ll use one of the most popular, the jQueryUI library.

http://jqueryui.com/

jQueryUI is highly configurable as we’re about to see.

First, click the demos link.

Though we’re specifically interested in the Accordion demo, you should take time to look at the other demos to see some of the other things that can be accomplished with jQueryUI.

Note that after you load the Accordion demo you can try different color “themes” by using the themes selector on the left.

When you’ve decided which theme you are interested in using as a starting place you need to download jQueryUI.

When you select the jQuery download link you’ll see the download configuration UI.

Note the two selection areas highlighted above.

We need to select the features (all by default) and the theme to be incorporated.

After downloading anf unpacking jQueryUI I’ve done a little reorginazaiton of the CSS and Images.

Now that we have included jQuery in our MasterPage, the jQueryUI script and the CSS file for the theme we selected into our project, we can implement the actual content pretty easily.

The entire .aspx markup looks like this.


[sourcecode language="JavaScript" htmlscript="true"]
<%@ 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/jQueryUI.css’ rel=’stylesheet’ type=’text/css’ />
<script src=’Scripts/jquery-ui-1.8.10.custom.min.js’
type=’text/javascript’></script>
<script type=’text/javascript’>
$(function () {
$(‘#accordion’).accordion({ header: ‘h3′ });
});
</script>
</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 id=’accordion’ style=’width=’400px;’>
<div>
<h3><a href=’#’>First</a></h3>
<div>
Lorem Ipsum is simply dummy text of the printing and industry.
Lorem Ipsum has been the industry’s dummy text ever since the 1500s,
when an unknown printer took a galley of type and it to make a type
specimen book. It has survived not only five, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
in the 1960s with the release of Letraset sheets Lorem Ipsum
passages,and more recently with desktop software like Aldus
PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div>
<h3><a href=’#’>Second</a></h3>
<div>
<asp:Label ID=’Label2′ runat=’server’ Text=’Loading …..’>
</asp:Label>
</div>
</div>
<div>
<h3><a href=’#’>Third</a></h3>
<div>
Lorem Ipsum is simply dummy text of the printing and industry.
Lorem Ipsum has been the industry’s dummy text ever since the 1500s,
when an unknown printer took a galley of type and it to make a type
specimen book. It has survived not only five, but also the leap into
electronic typesetting, remaining essentially. It was popularised
in the 1960s with the release of Letraset sheets Lorem Ipsum
passages, and more recently with desktop software like Aldus
PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</asp:Content>
[/sourcecode]


Note here a couple of points of interest.

First, the jQuery selector on line 9.

Every h3 tag inside a div who’s ID = accordion becomes the header of an accordion group.

Second, the first and third sections are just static content but the second accordion section contains an ASP.NET Server side label control.

This way the actual content of the second accordion panel can be populated programmatically.

Here’s an example.


[sourcecode language="JavaScript" htmlscript="true"]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text =
‘Lorem Ipsum is simply dummy text of the printing and typesetting ‘ +
‘industry. Lorem Ipsum has been the industry’s standard dummy text ‘ +
‘ever since the 1500s, when an unknown printer took a galley of type ‘ +
‘and scrambled it to make a type specimen book. It has survived not ‘ +
‘only five centuries, but also the leap into electronic typesetting, ‘ +
‘remaining essentially unchanged. It was popularised in the 1960s with ‘ +
‘the release of Letraset sheets containing Lorem Ipsum passages, ‘ +
‘and more recently with desktop publishing software like Aldus ‘ +
‘PageMaker including versions of Lorem Ipsum.';
}
}
[/sourcecode]


The content in the accordion panels size automatically to 100% of the container’s width.


[sourcecode language="JavaScript" htmlscript="true"]
<div id=’accordion’ style=’width=’400px;’>
[/sourcecode]


You can download a complete working sample [ HERE ]