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.


<%@ 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>

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.


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.';
  }
}

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


<div id='accordion' style='width='400px;'>

You can download a complete working sample [ HERE ]