Accordian panel

hi
I am making a navigation menu with an Accordion panel
Accordion tabs open Accordion content which contain links to new pages
I want last 3 tabs to be links that go directly to a new page, not open the Accordion content div.
I have deleted the Accordion content div and used onclick to make link function eg.
a href="#" onclick="MM_goToURL('parent','../httpdocs/contact.htm');return document.MM_returnValue">Contact us</a>
Is this the correct way to do this. I get an error message in the Accordion properties box -
the structure of this Accordion panel seems to be damaged

Those last 3 tabs don't need to be tabs at all, they need to be links styled to resemble the tabs on your accordion.
One way to do that is to add divs that bear the same classes as your accordion tabs. If you don't actually want to use the accordion classes, you can group new selectors in the css with the accordion classes. You will want to make sure that the new divs are not within the hierarchy of the accordion divs. You may need to experiment with their position (do it in code, where you can see it).
You can certainly use a behavior for the link function if you wish, but a simple css link should work just as well.
I recommend trying it without applying a behavior to the link first, in the interests of keeping it simple.
If you need more specifics, write back. I'm just on my way out to do an errand, but could check back later.
Beth

Similar Messages

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Need help with horizontal accordian panels

Hi,
I'm wondering how I would re-create a horizontal accordian panel set, such as the one used in this website link, "http://www.thecapriapts.com/".
When I insert a "spry accordian" panel set, the panels are stacked on top of each other. I guess you would consider that a "vertical" accordian. Is it possible to manipulate the CSS to have it display horizontally, like the link I attached? Or.. is this a common javascript that I sould look into?
As always, thanks for your help out there...
Chris

With spry, there are two different kinds you can use: horizontal and vertical. What you're looking at in that site is horizontal. Usually, it appears as rectangles placed next to each other with the spry flying out below. In DW, you can go to your CSS rules for your spry menu and change the width and height of your boxes in your spry, depending upon which rule you have selected. Play around with that and see if you can just manipulate the horizontal accordian spry to where the rectangles end up being tall and thin. This will make it difficult, however, to get the text on its side like you see in that site. I'm not sure how you would go about doing that. But I would suggest trying to play around with the values in your CSS styles panel on the right (this is me looking at CS5 mind you. I'm not sure what you're running.)
Either way, for times sake and also readability, might I respectfully suggest playing around with other sprys to see if any look more aesthetically pleasing for your site? It would also make it a lot simpler to tweak to your liking.

Add rules under menu text in accordian panel?

Hi,
The client requested rules under the text, to go the entire width of the accordian panel. I can't figure out how to do this.
For example, I need to add a dividing rule probably in a lighter tan/gold color the entire width of the accordian panel, between HOME and HOW IT WORKS:

Select one submenu entry (in the top left of the Muse window "menu item" has to be indicated.
Set "stroke" to "0". Then click onto the orange word "stroke". Here you can adjust all edges separately.

Spry accordian panel not closing

I have created a page using both the spry tabbed panels and
accordian panels. The accordian panels are in the content sections
of the tabbed ares. I want the accordian panels to be closed
initially, and whenever you click on the tab of the panel it will
open if it is closed, and close if it is open. I have modified the
code (as described in the Adobe Resource section) at the bottom of
the div. I got it to work on a simpler page (without the tabbed
panels) but I can't get it to close when click on if open. It will
close if another tab is clicked, but that isn't what I want. I'm
thinking it has something to do with the fact that it is in the
tabbed panels spry, or I am overlooking something. I am not very
verse in javascript, so I can't troubleshoot it. Can someone look
at the code and suggest a solution? The site is
http://www.capitolphotointeractive.com/test

Hi amilesslady,
You'll need to replace the version of the SpryAccordion.js
file on your site with a more recent one. You can get the the one
from Spry 1.6.1 here:
http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
Or you can download the Dreamweaver 1.6.1 updater and use it
to update the Spry related files in Dreamweaver and your sites.
http://download.macromedia.com/pub/labs/spry/1/spry_p1-6-1_updater_022508.mxp
--== Kin ==--.

Accordian panel widget dysfunctionality

Before I added an accordian panel widget, I pulled the content area on my page down to enlarge it vertically and allow enough room for panels to close and expand. It works fine if you leave "can close all" and "close all initially" options unchecked, but I don't want that. They should all be closed initially, so the visitor to the site can decide which to open and view. Anyways, if these options are checked the widget will move all text and placed image objects that lie below it, up and down, along with the bottom-most panel as it is opened and closed. This is extremely annoying and dysfunctional and renders the widget pretty useless for what I would like to do. Obviously the (css?) code is jacked. I hope the coders can fix this because the accordian panels is one of the slickest widgets in the palette.

I am getting an issue with the accordian as well. For me, my issue is that when I preview the page and I click on the accordians, everything underneath it sometimes moves and sometimes doesn't move and goes in front or behind the images. How does this stay consistant and always have the content that is underneath the accordian move? (look at the photo...I don't know if you can see it but the type and images is going over the dotted line and the dotted line is supposed to move when the accordian is open and closed).

Accordian Panels: want all CLOSED

The Accordian panels I've installed are lower down in the page body, just high enough to begin to see without scrolling down. Would like visitors to immediately see there's a list of topics - having the first panel open to start with, defeats that goal.
Suggestions on how to have all accordian panels closed, initially?

Thanks Ben, but aside from the fact I never use Design View in Dreamweaver (shudder), more to the point I am building this page in Drupal CMS and therefore (after testing the "base model" locally) am implementing and refining the code directly inside a page editor in my Drupal website. Here's the precise code I've typed in for the 2nd Accordian panel:
<code>
<div class="AccordionPanel">
    <div class="AccordionPanelTabBG">
        <div class="AccordionPanelTab">MARKETING</div>
        </div>
        <div class="AccordionPanelContent">
        <br>
Asgard Forge works with the Client to identify a clear consensus of what that company is and does, and shapes this into its Brand: a focused, concise, consistent Message about the Company.<br>
<br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   WE'LL ASSIST IN REFINING YOUR GOALS</span><br>
You may already know this cold – and then again it may help you sharpen your company focus;<br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   IDENTIFY COMPANY STRENGTHS & ASSETS</span><br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   DEFINE THE COMPANY PERSONALITY</span><br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   BUILD YOUR ONLINE BRAND</span>
<br>
Just because your company isn’t Nike or Apple, doesn’t mean you can’t take full advantage of having a brand that’s <strong>quickly recognized</strong> and <strong>enduringly remembered</strong>.
<br/><br/>
</div>
</div>
</code>
Again, for quick reference:http://www.asgardforge.com/web-design/web-design-company/new-client
As you can see, I've placed only two BR tags at the end of content in order to leave abit of padding there manually - and note the syntax. When the page is viewed and you look at the page source, you see my 2 tags PLUS the 6 differently-syntaxed </br/> tags.
If however you know for certain it's not someting SPRY does in constructing Accordian panels (I'm sorry but I don't yet know what your use or affiliation with SPRY is), then I would have to conclude it's something that Drupal does. Your confirmation on this point would be appreciated.
NOTE: As you can see in the above example, I've wrapped the AccordianPanelTab container inside another in order to maintain the Tab background all the way across while the + / - image to the left changes with toggle clicks. That's the only place I've diverged from the standard Accordian structure, and here's the CSS for that container:
.AccordionPanelTabBG {
    background-image:url(SpryAssets/bg-accordian-panel.gif); background-repeat:repeat-x; background-position:top;
    line-height:27px;
    border-left:1px solid #ccc; border-right:1px solid #ccc;
    margin: 0px;

Accordian Panel content size

Hi,
I am using Accordian Panel in several pages. When I go to CSS styles paneland and change Accordion Panel content size/height to 600 for example, it changes all the Accordian panels throughout my site to 600.
Is there a simple way of changing each panel individually.Am I missing something very obvious. I am learning CSS but not quite there yet. Any help would be appreciated.
Michael

To start with, especially when you are a novice at CSS, do not alter the original Spry Style Sheets. You will thank me for this tip once you get into more complicated web sites.
To have variable panel heights use the following constructor
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>
If you want fixed heights per accordion then you have numerous options of which I will show one. Apply a unique ID to your accordion and style accordingly has follows.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<style>
#Accordion600 .AccordionPanelContent {
    height: 600px;
</style>
</head>
<body>
<div id="Accordion600" 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>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion600");
</script>
</body>
</html>

Down arrows in accordian panel

I have an accordian panel and am trying to put down arrows in each of the 4 sections
See it at http://paralegaladvice.com/landlord-help.html
If I click any panel in a browser, the arrows do not move with their own section of the panels
They remain exactly where they are whether the panel are open or closed
I tried grouping, can;t.
So how do I insert the arrow in each section so it moves with that section???
It would help if you look at the page http://paralegaladvice.com/landlord-help.html and click the panels so you can see the problem
Thanks

Hi
I believe you are using image in label field which you cannot group with individual label field.
A possible workaround would be use the image as fill for label field and position it at center-right and then you can define states.
Something like this :
http://drop-down.businesscatalyst.com/index.html
Thanks,
Sanjit

Print from open accordian panel only

Hi all,
I'm hoping I have put this in the right section. Apologies if I haven't. I am trying to use accordian panels and what I want is to be able to print from the open panel only. I want to have a link in the panel saying "print this...." and only have it print that panel and not the closed ones. It's probably something realy simple that I am missing. Any help would be greatly appreciated.
Thanks

If you set a default CSS rule that prevents printing when the page is opened.
Using the link "print this" use the Spry Element Selector to change the CSS rule to enable printing of the section that you want, print the section and disable printing of the section.
For CSS have a look here http://www.alistapart.com/articles/goingtoprint/ or Google the subject
For Spry Element Selector see here http://labs.adobe.com/technologies/spry/articles/data_api/apis/element_selector.html or Google the subject
To print have a look here http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print-a-Web-Page-Using-Ja vaScript.htm or Google the subject
Gramps

Open Accordian Panel via anchor tag

I have about 20 accordian panels stuffed with content. Is it
possibe for a user to click a link on the same page and be carried
to the specific panel? -- having it open would be a bonus.
thanks for your time

I had a similar question. I'm trying to use named anchors on
one page in a site to to open specific panels on a different page,
but I'm not having much success. Depending on where I place the
anchor tags, I can get ALL of the panels with anchor tags to open
when the link is clicked. However, I can't seem to make a single
link open a single panel. My javascript skills are minimal -- I can
edit from examples, but I don't have the knowledge to write code
from scratch. Any help or advice is most appreciated.

Problems editing accordian panels

Hi,
Have an issue where InContext editing was capable last month of editing a page with Spry accordian panels, but recently weno longer can edit the panels.
The subject page is
http://www.peradance.com/Atlanta-Dance-Classes-Calendar.html
which is a dance class calendar.
Each class is defined as a repeating region consisting of a title and a description, both within a Spry accordian panel which when click expands the accordian detail window to show the description.
I set this up for the client weeks ago and to my surprise it worked OK with InContext editing. However, now we find it is difficult to edit the text in the title windows -- perhaps some recent update to InContext editing has broken this ability.
We can add or duplicate a repeating region to add a new class, but when we try to click inside the Title box for that class we can't seem to insert a cursor anymore to change the text -- InContext editing now seems confused and wants to expand/contract the description panel, rather than let us insert a cursor to edit the title. We can insert the cursor in the description and edit it OK.
This fails using Windows Firefox, IE8 and IE7 so trying another browser doesn't help.
I tried to talk the client into a simpler calendar without the Spry expanding accordian (just have the class title and description always exposed) but he would rather abandon Adobe's software than give up that functionality. What he really wanted rather than the accordian was for the class description to appear in a popup window when the cursor hovers any title, but I discovered there is no way to use Spry tips or any javascript popup in a way that the client can edit with InContext editing. I was surprised to find the Accordian panel did work fine. Why it has now stopped working is a mystery.
The code for a day on the calendar looks like this:
<div class="day">
<p class="title">Monday</p>
<div id="Accordion2" class="Accordion" tabindex="0" ice:repeatinggroup="*">
      <div class="AccordionPanel AccordionPanelOpen" ice:repeating="true">
        <div class="AccordionPanelTab" ice:editable="*">
            <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">7:00 PM BELLY DANCE BASICS & FITNESS</span></span></p>
        </div>
         <div style="height: auto; display: block;" class="AccordionPanelContent" ice:editable="*">
         Learn the fundamentals of the art of belly dance from multi award winning instructor Aziza Nawal. In this class, you will learn the basics of middle eastern dance, improve your tecniques, all while you get a nice workout and toning your body
         </div>
      </div>
<div class="AccordionPanel AccordionPanelClosed" ice:repeating="true">
    <div class="AccordionPanelTab" ice:editable="*">
        <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">8:00 PM  FOCUS on CLOSE EMBRACE TANGO</span></span></p>
     </div>
     <div style="height: 0px; display: none;" class="AccordionPanelContent" ice:editable="*">
In our Monday classes, we focus on concepts dealing with the technique of close embrace tango while always keeping a sharp focus on musicality and navigation. The moves that we teach in this class will be simple, musical and elegant. We will focus on different tango orchestras as well as vals and milonga and give you specific tools and moves to interpret these in an interesting and satisfying way. We will try to always spend time focusing on the followers role in the dance.</div>
   </div>
</div>
</div>

The Accordion keyboard navigation feature (the ability to change the open panel using the keyboard keys ) is preventing InContext Editing to properly edit the contents of the editable region.
You can disable to keyboard navigation feature of an Accordion by setting it to false in the constructor:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:false});
Note: to disable keyboard navigation when the page is loaded inside InContext Editing use:
var useKeyboard = typeof(top.ice) == "undefined";
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:useKeyboard });
This will make the editable regions editable only in Internet Explorer.
There's a CSS rule used by the Accordion widget to disable text selection on the panel titles in Firefox and Safari:search .AccordionPanelTab in the SpryAccordion.css file and remove:
    -moz-user-select: none;
    -khtml-user-select: none;
See the InContext Editing known issues and limitations, the Editing section, from Adobe Labs InContext Editing page.
Regards,
Dan Popa

Spry Accordian Panel not showing?? What am I missing?

http://www.neighbor.org/plan_giving2.htm
Take a look at the last accordian panel, it is not showing fully, but you can still click on it depending in what browser. How do I adjust it to show fully - The Planned Giving Council Tab.
Thanks,
TD

I'm not seeing the problem on any of my browsers, but I see you have built the page in Frames, which are an old technology, and a little hard to troubleshoot from here.
It could be that the height of your Accordion is falling deeper than the Browser Viewport, then being hidden by the bottom of the Frame. Try shortening up the accordion; there could be a little space taken out between the accordion tabs.
Beth

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

Spry Accordian panel content height for more than 1 accordian in site

Hi,
I have added a couple of accordians to my website on different pages.
When I adjust the panel content height for 1 it automatically changes it for all of them on my site causing scroll bars to be visible - which I am trying to avoid.
I'm new to Spry coding and am not sure what to change.
Thank you for your help

This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
In the CSS stylesheet, do this:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: auto;
#normalheight .AccordionPanelContent {
     height: 100px;
#doubleheight .AccordionPanelContent {
     height: 200px;
Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
Beth

Link to specific accordian panel

Hi there,
I'm currently using the Spry Accordian feature (with 4 panels) on an internal page of a site I'm building. I have a requirement to place 4 links on the homepage that take me to this internal page and open specific panels, ie. one link would take you to the page with panel 3 open, while another would take you to the page with panel 4 open.
Any advice on how I can achieve this would be greatly appreciated.
Kind regards
Paul

Read: foundationphp.com/tutorials/spry_url_utils.php

Accordian panel

Similar Messages

Maybe you are looking for