Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Accordion layouts are one of the nicest ways to organize large groups of information, especially multipart operations that require a lot of user interaction. For example, the checkout process in a shopping cart that requires shipping, billing and then credit card information. Instead of being multiple pages, we can use an accordion layout to get all the information nicely on one page. ColdFusion 9 adds a new accordion type to the cflayout tag. In Chapter8, open accordion.cfm and I already have an accordion layout built for you.
You can see here I have my cflayout tag, type="accordion" and I have two cflayoutareas. Each of these has a source that points to a file on my assets folder. Now, each of these just have a couple of form fields on them. The ProfileInfo for example. Let's go ahead and open that one. It just has a few labels and inputs for Email Address, Username, Password and a Password Confirmation. Go ahead and close that file and let's take a look at the accordion pane in the browser. Go to localhost:8500/Chapter8 and accordion.cfm.
This last one, createAccordionPanel, has the ID of the panel I want to add to, the name of the new panel, a title for it and then a URL to a file that I want to include as the content of that new panel. And then at the end I can pass in some additional attributes such as whether or not that particular new panel should be selected. Now, one more thing we will add, which is a nice little touch, is a new title icon attribute for the cflayoutarea tag. So, I will say titleicon = and I can put in the URL to one of my icons in the assets folder.
In this case, we will do assets/profile. png from my Profile Info panel and then we'll do titleicon=assets/billing.png. Switch back to our browser and reload and I have nice little title icon sitting next to each of my titles for the panel. And that's all there is to building the new accordion panels inside ColdFusion 9. You are going to have one more way to easily organize large forms and collect data from your users.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100058 Viewers
56 Video lessons · 113115 Viewers
71 Video lessons · 81971 Viewers
131 Video lessons · 39327 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.