Example of Dreamweaver CS3 Spry Accordion Widget
A good definition of Spry can be found in the Adobe Labs web pages: “The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. “
Since I upgraded my Dreamweaver from Dreamweaver 8 to Dreamweaver CS3, I’ve been waiting for a chance to use more of its Spry widgets. I recently had a chance to use the Accordion Spry widget and here is a summary of my experience.
The Problem: A local club has over than 100 reciprocal clubs nation-wide. Members need to find a list of reciprocal clubs in a particular State and contact clubs of interest. The local club likes to provide this information to its members on its web site to make it more accessible to members.
Solution Options: There are many different ways to tackle this problem. Here are a couple of these options:
1. List Solution: My first attempt at presenting this information is to use an unordered list with the States names and link them to the information for each State on the same page, click here to see how this solution looks like.
2. Spry Accordion Solution: My second option was to use a Spry Accordion widget with the States Names as labels and the corresponding club list as the content, click here to see how this solution looks like.
Here are my top 5 reasons for choosing the Spry Accordion solution :
- Very elegant option for presenting a large list of information. As you can see from the example above, the same information can be presented much more efficiently on a web page using a Spry Accordion widget.
- Very easy to use and customize. As with most other Dreamweaver tasks, adding a Spry widget can be done with a few clicks (I didn’t need to use any tutorials to figure out how to do it). Customizing the widget is best done using CSS and a quick link to a support manual page gives good guidelines and tips. Also, adding labels and content to the widget can be done in Design view; however, it’s easy to understand the Code view of the widget and make changes to the code.
- Search engine friendly. As with other Spry widgets, the Accordion widget is a page element that combines HTML, CSS and JavaScript code. When adding text to an Accordion widget, it is mainly wrapped with “div” tags making it easily accessible by Search Engines.
- Good looking and User friendly. From the user end, an Accordion widget is intuitive and easy to use. Just click on a tab title and you can see its content.
- Make Dreamweaver CS3 worth the investment. Adobe Creative Suite 3 Web Premium has a high price ticket ($1,599 full/ $499 upgrade) yet with all its new features, CSS support and Spry widgets I think it’s well worth the investment.
Ed Scharf said,
April 28, 2008 @ 4:43 pm
Seth,
I really like your use of the Spry Accordion widget. I’m trying to see if I can make it work as a left navigation, but I can’t figure out how to get the page to load with just the headings and none of the subcontent. I also can’t figure out how to adjust the height of the subcontent area to fit the content. I assumed it was simply changing .AccordionPanelContent {height:200px} to 100%, but that didn’t work.
Any suggestions would be greatly appreciated
Lamees said,
April 28, 2008 @ 5:10 pm
Hi Ed,
Thanks for your comment. To answer your first question regarding loading the Accordion widget with all the Content Panels hidden, I also had to dig for this information and found it somewhere in Adobe’s documentation. Basically, you’ll need to modify the instantiation call to the Accordion object and add a second parameter.
Change:
var Accordion1 = new Spry.Widget.Accordion(”clubAccordion” );
(note: I gave this instance of the Accordion widget the clubAccordion name to be able to change its style on this page and use a different style for another instance of the Accordion object on another page.)
To:
var Accordion1 = new Spry.Widget.Accordion(”clubAccordion”, { useFixedPanelHeights: false, defaultPanel: -1} );
You’ll find this JavaScript code close to the bottom of the page where you add the Accordion widget. (Hint, view the Source Code of my example page to see the code.)
Regarding your second question about the hight of the Content Panel, the Properties panel of the Accordion widget has a link called “Customize this widget”. It provides information on changing the widget text, background color and width but doesn’t mention anything about the height of the Content Panel!
I like your idea of using this widget as a navigation menu! I’d be curious to learn about your experiment.
Good luck!
Barbara said,
May 8, 2008 @ 3:13 pm
Nested Accordions should be able to be used to create nice vertically expanding menus - I’ve been trying to do this since switching from GoLive (and the user friendly MenuMachine) to Dreamweaver.
I am currently just switching between GoLive and Dreamweaver so that I can retain the easy to create classy looking MenuMachine menus - but they are not search engine friendly so I do need to find an alternative.
Lamees said,
May 10, 2008 @ 1:57 am
Hi Barbara,
Thanks for sharing your experience with the Spry Accordion widget and your thoughts on using it as a vertical menu. However, I would disagree that it’s not search engine friendly.
The navigation menu is search friendly because it includes text links. The fact that the code needs all these nested tags might not make it search engine friendly, but it’s still search engine compatible. This can be a bigger issue if the site layout is designed such that the navigation menu appears in the code before the main content. You can minimize this drawback by choosing a CSS layout where the main content of the Web page appears before the navigation menu in Code view.
So, I suggest not to give up on Accordion widget, just try to balance Usability with Search Engine Compatibility in your design decisions.
Vinit V. Kulkarni said,
May 27, 2008 @ 12:07 pm
Hi ! could you please explain me spry thing ? I read your tutorial but not getting what is this spry thing in dream cs3 ?
Lisa said,
June 13, 2008 @ 4:11 pm
Hi,
Thanks for your information on the spry accordion widget. I have a question for you regarding browser compatibility.
I am currently developing pages for our company’s intranet site. In the left navigation of the pages, I have added an accordion widget as the menu with links to other pages on the site. When I preview the pages in Firefox, the widget shows correctly, exceot that one panel is always open. I would like the widget to display with all the panels closed when the pages are loaded. That’s the first issue.
The second issue is that even though the widget looks correct in my browser, other employees here use Explorer 7 and when they preview the pages, the accordion widget is completely expanded, with all the panels open at once. When you click on one of the panel tabs, the accordion tries to close but only makes it halfway before opening again.
Is there code that I can paste into the CSS to correct these issues so that it wil;l view correctly in older browsers? I have already tried checking browser compatibility for the pages and Dreamweaver isn’t finding anything. I am new to web designing and would greatly appreciate any assistance you could give.
Thanks,
Lisa
Lisa said,
June 13, 2008 @ 4:13 pm
I’m sorry. Employees here use Explorer 6, not 7. And they are on PCs while I’m on a PowerMac G5.
Lamees said,
June 16, 2008 @ 1:42 am
Hi Lisa,
Thanks for your inquires. Regarding your question about loading the accordion widget with all the panels open, you can simply do that by adding a second parameter to the instantiation call. For more details, read my previous comment posted on April 28 for the exact code. Also, you can view the Source code of my example page to see how I do it for my accordion widget.
Regarding the browser compatibility issue, I also noticed that when IE loads a page with Spry widgets, the widgets are not enabled until you allow JavaScript for the page. As a result, they accordion widget (and all other Spry widgets) would not load with the expected appearance but would automatically be fixed once the user enables JavaScript for IE.
At this time, I don’t know of a workaround to fix this issue without involving the user (as explained above). If you find the fix before I do, please feel free to share with me.
Hope this helps!
Lamees
Lisa said,
June 16, 2008 @ 1:31 pm
Thanks, Lamees. I was able to fix the first problem using the code you gave to the first commenter. That problem is solved.
Now it’s just a matter of fixing the browser compatibility problem. I have a friend looking into it and my boss is as well. Please let me know if you find anything.
Lisa
mari said,
June 18, 2008 @ 1:30 pm
I’m having the same issue about de Accordion Widget and the navigation en IE, and i’ve been looking for a solution in other forums but I have’nt find anything. If anyone find out how to solve this problem please feel free to share this information by email. Thanks