Join Daniel Short for an in-depth discussion in this video Building accordions, part of ColdFusion 9: AJAX Controls and Techniques.
Tabs are great, but aren't always the best way to walk a user through a multistep process or to show dense lists of information. But for this type of functionality we could use an accordion in much the same way that we used the tabs. So, to get started here we are going to take our tabs.cfm file. I am just going to Copy and then Paste, and we'll call this accordion.cfm. I'll go ahead and open up that file. To get started, I am just going to change the type from tab to accordion.
Instead of selectAccordion, let's choose expandAccordion. Then we can't actually enable or disable accordion panels, like we can tabs. So, we are going to remove those. So, let's go ahead and save our file and then see if that works. We'll close our Error Console and reload the page. Because I did a global Find and Replace, I have some problems. There is no ACCORDIONSTRIP or ACCORDIONPOSITION, so let's just go and remove those. We'll save it and we'll try again. There we go.
I just noticed I have an error here. Let's replace that minus sign with an equals, there we go. So, we have our panelID, right? Now, we need to have our panelName. So, we'll do the same thing, ColdFusion. getElementValue and we'll grab our panelName. Now, we are going to get a hook to our layout objects, so ColdFusion.Layout. Then we are going to create an accordion panel.
Now, the first thing we need to do is grab the name of our accordion panel, which is Accordions. Then we specify what our new panelID is going to be, we specify what our panelName is going to be, and then we specify the source of that panel. So, in this case it's going to be lipsum. cfm, and we'll say pageName =, and then we'll specify our panelName. All right, so I am going to fill out these two text fields. I am going to click this button and this should add a new panel to our accordion.
Let's switch over to the browser and reload and give this a shot. Let's call it TestPanel and our panel name is My Test Panel. We'll click Add. Here at the bottom we can see My Test Panel. If I click it, it's loading up lipsum. cfm with My Test Panel as the content. That's all there is to accordion layouts. From a coding perspective, they are nearly identical to tabs, which makes it a completely trivial operation to switch between the two during development to find out exactly what's going to work for you.
- Manipulating and securing container contents
- Debugging AJAX behaviors
- Building UI elements such as accordions and border layouts
- Using rich prompts with cfmessagebox
- Understanding advanced cffileupload
- Sorting and grouping data in grids
- Binding data to form fields
- Creating a map with markers