The accordion control (ACT)

 

AccordionFew months ago, when I was building the first version of reBlogger.com (it’s been slightly redesigned now), I had to cram 5 paragraphs of the text describing reBlogger and its features on the home page. After trying out different things, I’ve decided I’ll use the accordion style control and list only the paragraph titles, so when user clicks on any of these titles, the paragraph would appear. Back then, AtlasControlToolkit did not have Accordion control, so I had to do it by myself… javascript, css, 3 cups of coffee and one afternoon was what it took.

Now, I’ve just found out that in AtlasControlToolkit there is an accordion control. I decided I’ll give it a try and recreate the accordion I created back then. It took me altogether some 15 minutes and the end result is way simpler, easier to modify and well, faster then the one I’ve built. So here is how it works.

First thing I’ve done was to create a new web site from “Atlas Template” in Visual Web Developer.

Then I’ve created the Accordion Control, part of the Atlas Control Toolkit. The accordion control serves as a container for the AccordionPanes, which each hold a certain paragraph in my example.

OPEN CODE IN NEW WINDOW

You will notice here, some of the peculiar properties, so let me explain them. SelectedIndex property sets which pane will be displayed first. If it’s 0, then the first one will be displayed, 1 would show the second pane etc. (0 based index). The panes are indexed in the way you’ve inserted them. AutoSize property indicates how will accordion control size. If set to “none”, the accordion will grow or shrink with no restrictions at all, if you set it to “limit”, the accordion will never grow larger than the height you specified (the scrollbar will appear), and lastly you can set it to “fill”. When set to “fill”, accordion will always have the exact size as the height you’ve specified. Content will be shrunk or expanded to match the height of the accordion. HeaderCssClass and ContentCssClass respectively set the css class for the header and content templates of each “AccordionPane” (open the next code example, to see how AccordionPane control looks like). FadeTransition can be set to true or false, indicating whether “AccordionPane” will just disappear when new pane is opened, or will it fade out. Lastly, “FramesPerSecond” property determines how fast will accordion panes switch. The higher this number is, faster will panes switch.

Next, and surprisingly the last step was to insert inbetween the opening and closing tags of the accordion control, any number of accordion panes I wanted (I inserted 6 panes, one for each paragraph).

OPEN CODE IN NEW WINDOW

There are really only two things to explain here. The header part holds the content you want to be in the header (duuuh…), in my case this will be the title of the paragraph. The content part contains… hold your breath now… the content of that pane. In my case this is the actual paragraph. And that’s it.

You can download the whole project from our reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


2 Responses to “The accordion control (ACT)”

  1. Peter Lurie Says:

    Hi!

    Is there a plugin to allow WordPress Users to make Accordion type entries, like you describe above?

    Many thanks
    Peter

  2. ijurq Says:

    how about nested accordian?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: