Tales from the Evil Empire

Mix06 demo part 1: the accordion control

I thought I'd write a few posts about the controls I've created for Brad's Mix06 demo, which you can download from his blog:

Full source code of the demo: http://blogs.msdn.com/brada/archive/2006/03/23/559077.aspx
Accordion control source code: http://blogs.msdn.com/brada/archive/2006/03/29/563648.aspx

One of the most reusable pieces of the demo is the accordion control. Plus, I'm French so it looked like a natural way to start this series of posts.

(This is a snapshot of the control, an image, not a live sample)

The control is a client-side Atlas control. It does pretty much what you expect, which is to show only one of its panes at a time. It has a nice transition effect when switching to a new pane. Here's how you use it...

As usual with Atlas client-side controls, the control itself does not do any rendering. This part is left to the page developer and is completely free-form, which gives you total control over the rendering and helps separate layout and semantics from behavior. So the first thing to do is to create a container element (a div will do) and put the different headers and content panes inside of that. For accessibility reasons, I recommend you use A tags in the headers. Divs are fine for the panes themselves.

The accordion control will look at the contents of its associated element and will consider every other sub-element as a header or a content pane. So let's associate an accordion control to the div above:

And... that's it, we're done.

One nice thing to note is that if javascript is off on the user's browser, the contents of the accordion will just show with all panes fully deployed.

In a future post, I'll explain how such a control is built and in particular how I included the animation effect.
http://weblogs.asp.net/bleroy/archive/2006/04/04/441921.aspx

UPDATE: Here's the scaffolding you need in your page for the accordion control (or any Atlas control) to work... You need a script manager on the page, which will manage the necessary script inclusions. Here, the accordion needs the Glitz library for the animations so we're adding that:

<atlas:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <atlas:ScriptReference ScriptName="AtlasUIGlitz" />
    <atlas:ScriptReference ScriptName="Custom" Path="~/ScriptLibrary/Dice.js" />
  </Scripts>
</atlas:ScriptManager>

Replace Dice.js with accordion.js if you're using the accordion-only version of the script file (the dice.js has the other controls used in Brad's demo).
If you're not using ASP.NET, you'll have to manually add <script> tags to your page that point to Atlas.js and the glitz script file.

And of course the Atlas markup itself must be in a <script type="text/xml-script"> section:

<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:dice="http://schemas.microsoft.com/xml-script/2005/dice">
    <components>
      <dice:accordion id="accordion1"/>
    </components>
  </page>
</script>

Note the namespace declaration here so that we can use the dice:accordion tag. I should have included that from the start, but I wanted to show only what's relevant to the sample. My mistake, it's corrected now.

UPDATE 2: The Atlas Control Toolkit now has a far more advanced Accordion control, which should be preferred over this one for real-world use.