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.
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).
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
“Do you know what your employees are blogging about?”