Adobe Dreamweaver - Working With The Spry Accordion Widget

Adobe Dreamweaver * Working with the Spry Accordion widget
Dreamweaver/Working with the Spry Accordion widget

Adobe Community Help
Search
About the Accordion widget Insert and edit the Accordion widget Customize the Accordion widget
Was this helpful? Yes No
About the Accordion widget

An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs. In an accordion, only one content panel is open and visible at a given time. The following example shows an Accordion widget, with the first panel expanded:
To the top
A. Accordion panel tab B. Accordion panel content C. Accordion panel (open) The default HTML for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for each panel, and a header div and content div within the tag for each panel. An Accordion widget can contain any number of individual panels. The HTML for the Accordion widget also includes script tags in the head of the document and after the accordions HTML markup. For a more comprehensive explanation of how the Accordion widget works, including a full anatomy of the Accordion widgets code, see www.adobe.com/go/learn_dw_spryaccordion. For a tutorial on working with the Accordion widget, see www.adobe.com/go/vid0167.
Insert and edit the Accordion widget

Insert the Accordion widget
Select Insert> Spry> Spry Accordion. Note: You can also insert an Accordion widget by using the Spry category in the Insert panel.
To the top
Add a panel to an Accordion widget

1. Select an Accordion widget in the Document window. 2. Click the Panels Plus (+) button in the Property inspector (Window> Properties). 3. (Optional) Change the name of the panel by selecting the panels text in Design view and altering the text.
http://help.adobe.com/en_US/dreamweaver/cs/using/WS6689349F-7E48-4bbe-AABA-B0267E5047BAa.html[2/27/2013 6:21:49 PM]
Delete a panel from an Accordion widget

1. Select an Accordion widget in the Document window. 2. In the Panels menu of the Property inspector (Window> Properties), select the name of the panel to delete, and click the Minus (-) button.
Open a panel for editing

Do one of the following: Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at the right of the tab. Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels menu of the Property inspector (Window> Properties).
Change the order of panels

1. Select an Accordion widget in the Document window. 2. In the Property inspector (Window> Properties), select the name of the Accordion panel you want to move. 3. Click the up or down arrows to move the panel up or down.
Customize the Accordion widget

Although the Property inspector enables you to make simple edits to an Accordion widget, it does not support customized styling tasks. You can alter the CSS rules for the Accordion widget and create an accordion that is styled to your liking. For a quick reference on changing the colors of the Accordion widget, see David Powerss Quick guide to styling Spry tabbed panels, accordions, and collapsible panels. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryaccordion_custom. All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves the SpryAccordion.css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget. This file also contains commented information about various styles that apply to the widget, so you might find it helpful to consult the file as well. Although you can easily edit rules for the Accordion widget directly in the CSS file, you can also use the CSS Styles panel to edit the accordions CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panels Current mode.
To the top
Style Accordion widget text

You can style the text of an Accordion widget by setting properties for the entire Accordion widget container, or by setting properties for the components of the widget individually. To change the text styling of an Accordion widget, use the following table to locate the appropriate CSS rule, and then add your own text styling properties and values: Text to change Relevant CSS rule Example of properties and values to add font: Arial; fontsize:medium;
Text in the entire accordion (includes both tab and content
.Accordion or .AccordionPanel
panel) Text in accordion panel tabs only Text in accordion content panels only 1 .AccordionPanelTab font: Arial; fontsize:medium;
.AccordionPanelContent
font: Arial; fontsize:medium;
Change Accordion widget background colors

To change the background colors of different parts of an Accordion widget, use the following table to locate the appropriate CSS rule, and then add or change background color properties and values: Part of widget to change Relevant CSS rule Example of property and value to add or change backgroundcolor: #CCCCCC; (This is the default value.) backgroundcolor: #CCCCCC;
Background color of accordion panel tabs
.AccordionPanelTab
Background color of accordion content panels Background color of the open accordion panel
.AccordionPanelContent
.AccordionPanelOpen .AccordionPanelTab
backgroundcolor: #EEEEEE; (This is the default value.) color: #555555; (This is the default value.) color: #555555; (This is the default value.)
Background color of panel tabs on hover
.AccordionPanelTabHover
Background color of open panel tab on hover
.AccordionPanelOpen .AccordionPanelTabHover
Constrain the width of an accordion

By default, the Accordion widget expands to fill available space. You can constrain the width of an Accordion widget, however, by setting a width property for the accordion container.
1. Locate the .Accordion CSS rule by opening up the SpryAccordion.css file. This is the rule that defines properties for the main container element of the Accordion widget. You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window> CSS Styles). Make sure the panel is set to Current mode. 2. Add a width property and value to the rule, for example width: 300px;. More Help topics The CSS Styles panel in Current mode
Discuss This Page

12 messages - Last message on Jan 21, 2013 at 6:13:25 PM by fridgedoctor
Dec 19, 2012 7:36 AM
in response to Community Help
Re: Working with the Spry Accordion widget
teamgmis
I added an accordion widget and it works on one site page while same code won't work on another page. It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-DoingNow/K-5 th-Grades.aspx Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-DoingNow.asp x Yet both pages have identical code (with absolute links to the CSS and JS files). Can anyone shed some light on a solution?
Reply
Dec 19, 2012 8:16 AM
in response to teamgmis
Jon Fritz II
Your pages are not using identical code. It's very similar, but not identical. The div with class="sidebar-content" is causing the problem. It appears you have used 795px of paddding to position the Check It Out content on the far right of your page. That now over 795px wide <div> tag is positioned over the top of your links in your accordion which makes it impossible for you to click on them since clicks go to the mostly empty div over the top of it. Change the position:absolute to position:relative. Remove the 795px padding and add a left:795px to position it correctly.
Reply
Dec 19, 2012 8:57 AM
in response to Jon Fritz II
teamgmis
Awesome! Thank you for the quick response and the helpful information. It's all good now.

Happy Holidays!
Reply
Jan 11, 2013 8:59 PM
2acremeadow
I am currently using the accordion widget. The only thing that is not working is the content panel will not open enough to see all the content. I am following the Adobe Dreamweaver CS6 classroom in a book and have even compared my code to the code on the CD for the lesson that includes the accordion. I get the scroll bar (which I do not want) even when I do not have scroll selected. I have assigned a height (450px) and overflow: auto; to the content panel, but it does not open tall enough. Can you please provide any suggestions for fixing the problem? Thanks
Reply
Jan 11, 2013 10:53 PM
in response to 2acremeadow
Ben (Altruistic Gramps)
Add the highlighted to the constructor
var Accordion1 = new Spry.Widget.Accordion("Accordion1" , {useFixedPanelHeights: false} );
Reply
Jan 14, 2013 7:19 AM
in response to Ben (Altruistic Gramps)
2acremeadow
Thank you so much! Sorry for the late reply but I am new to this support area and could not find how to reply. Your answer worked perfectly and since I am not familiar with java script, I had not looked there. I went into that file and changed the result to true. Thanks again.
Reply
Jan 14, 2013 12:17 AM
Melanie @Laropin
Hello, How do you remove the light blue border that surrounds the widget? I can't find it as a border in the css and I'd like to remove it. Also, where do I add the code set out in the previous post? I'd like my content panels to expand to the full size of the text box in the particular tab (so resizing for each tab). How do I achieve that? Thanks Melanie

Reply
Jan 14, 2013 12:30 AM
in response to Melanie @Laropin
Melanie @Laropin
Hello, I have the code for the adjusted content height. I'd really like to know how to get rid of the light blue border around the widget. I had the same problem on the tabbed panel widget tabs. I'd like that blue line not to feature in my styling but I can't find what's causing it to appear in the css. Thank you.
Reply
Jan 14, 2013 2:25 AM
in response to Melanie @Laropin
Ben (Altruistic Gramps)
In SpryAccordion.css which can be found in the SpryAssets sub-folder, go to line 25. Add outline: none; so that the whole looks like
.Accordion {
border-left: solid 1px gray; border-right: solid 1px black; border-bottom: solid 1px gray; overflow: hidden; width: auto; outline: none; }
I must warn you though, the blue halo is a built-in accessibility feature.
Reply
Jan 14, 2013 2:30 AM
in response to Ben (Altruistic Gramps)
Melanie @Laropin
Thank you very much.
Reply
Jan 21, 2013 5:42 PM
fridgedoctor
I have a question regarding using the accordion widget on a template based webpage that also includes the jsocial widget which provides the social icon link buttons to all the media sites. I have the jsocial widget nested insided a non editable region of my template, so it shows up on every web page. There must be some sort

of conflict with the two widgets, because when I add the accordion widget to an editable region in an existing webpage, and I test the page, the accordion widget is there and active, works great, however the social icons then disappear. Any help would be extremely appreciated, as im thisclose to getting this new site published, and this is pretty much the only thing holding me back. thank you to any who can help. Scott S.
Reply
Jan 21, 2013 6:13 PM
in response to fridgedoctor
fridgedoctor
I should also add that the social icons have disappeared from ALL the pages, not just to the page I added the accordion widget. Thanks again.
Reply
Go to original post
Reply to original post
Twitter and Facebook posts are not covered under the terms of Creative Commons. Legal Notices | Online Privacy Policy

Adobe Dreamweaver - Working With The Spry Accordion Widget

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Adobe Dreamweaver - Working With The Spry Accordion Widget

Uploaded by

Copyright:

Available Formats

Adobe Dreamweaver * Working with the Spry Accordion widget

Dreamweaver/Working with the Spry Accordion widget

Was this helpful? Yes No

About the Accordion widget

Insert and edit the Accordion widget

Add a panel to an Accordion widget

http://help.adobe.com/en_US/dreamweaver/cs/using/WS6689349F-7E48-4bbe-AABA-B0267E5047BAa.html[2/27/2013 6:21:49 PM]