Page 1 of 2 With the release of Adobe's Spry JavaScript library, which is now included within Dreamweaver, we're gifted with several new optional widgets and effects to add into our web pages. The one I'd like to cover today is the new Accordion widget. This widget is quite simple to use really, with a little guidance. For the TODCon conference schedule, which I'm in charge of maintaining, I've added this accordion feature. We'll use that as a case study for the feature through this series.
The first thing you'll want to do is open either a new page, or the page where you'd like to place this accordion widget. Adding it is simple with Dreamweaver CS3 since there's a new Spry panel on the Insert bar. Place your cursor in the page where you'd like to add the Spry widget, and click the icon for Spry Accordion (the second from the right).
Figure 1: Spry pane on the Insert panel
By default, the widget will be as wide as its containing element. If you'd like to constrain its width, you can give its parent container a width. Another method would be to place your cursor anywhere in the Accordion and on the tag selector (at the bottom of the document window), choose the <div.Accordion#Accordion1> element. In the CSS Styles panel (set to Current view), place a width on the Accordion itself.
When you save your page, you'll see a dialog telling you there are dependent files which have been created. These are the CSS and JavaScript files inserted both into the head of your document as well as the root of your site. They must be uploaded to the server along with the HTML page. The path for your particular site is shown in the Copy Dependent Files dialog:
Figure Two: Dependent files dialog
The Accordion widget will be inserted with two panels already created. Let's look at the code behind the scenes.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
The first line, <div id="Accordion1" class="Accordion" tabindex="0"> is the beginning of every accordion widget. If you have more than one accordion on a page, it will be named Accordion2, Accordion3, etc. The tabindex is used both for accessibility reasons and as the focus hook for the JavaScript. Meaning, if you remove it, the color change seen when you click into the Accordion (otherwise known as "focus") will not happen. The tabindex will, however, show up as a problem if you try to validate your page.
The next line, <div class="AccordionPanel">, is the beginning of each panel within the accordion itself. Within it are two elements, the AccordionPanelTab and the AccordionPanelContent. The Tab is the top bar seen when the accordion panel is closed. The Content is the area seen when that panel has focus and opens up.
The styling for all these areas are available within the CSS panel. Place your cursor into the AccordionPanelTab of the first panel (seen by default in its open state). Make sure your CSS Styles panel is in the Current mode. You'll notice that the active CSS rule is .AccordionPanelOpen .AccordionPanelTab. This is the rule that controls what the panel's top tab looks like when you've activated, or opened it. Placing your cursor into the closed panel will reveal the rule that controls the closed panel's top tab -- .AccordionPanelTab. Adding properties and/or changing values will change the look of the AccordionPanelTabs. The look is completely controlled by CSS.
There's more information about editing the CSS for the Spry Accordion in the Adobe Live Docs for the accordion widget.
Figure 3: Current state when in the open panel's tab
You may have noticed when you placed your cursor into the second panel of the accordion that a small eye icon showed up on the right side of the PanelTab. Clicking this eye will open the panel you are over so you can edit within design view.
Figure 4: Eye icon
Keywords
spry, dreamweaver cs3, css, javascript, accordion widget, constructor
