Accordion Spry problem

The issue is basically this:
I have an accordion (Spry). Let's say I click an element on
it, shifting it. Now if that element was also a link, it will load
a new page. Unfortunately, it also resets the accordion to default
state, totally nullifying any semblance of "flow" between the
pages.
How can I fix this?

http://foundationphp.com/tutorials/spry_url_utils.php
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"scripting_challenged" <[email protected]>
wrote in message
news:fs007u$mmi$[email protected]..
> The issue is basically this:
>
> I have an accordion (Spry). Let's say I click an element
on it, shifting
> it.
> Now if that element was also a link, it will load a new
page.
> Unfortunately, it
> also resets the accordion to default state, totally
nullifying any
> semblance of
> "flow" between the pages.
>
> How can I fix this?
>

Similar Messages

Nested Accordion Spry problem

What I am trying to accomplish is fairly simple, but I'm not seeing what the problem is. I have a nested accordion spry that, for all intents and purposes, is working fairly well. There's a weird problem with some of them not collapsing, but I can live with that. What I'm trying to do is put a checkmark beside any pages in the index that the student has viewed.
I'm setting up an array called yesPages here:
var yesPages = Spry.$$("yesPages");
What I want to happen is that it will hold an array of all the pages in my XML file that the student has already viewed. A bookmark, basically. To start it out, I place the first page in the array like so:
yesPages="10000";
That way, when the student starts the lesson, they've already seen the first page. As they progress through the course, I have a function called clickNext that will add to the yesPages array in this for loop:
for (var w=0;w<lessonStatus.length;w++)
if (lessonStatus[w]=="Yes")
   yesPages=yesPages + "," + rowsPage[w]["@pageNo"];
   alert(yesPages);
I put the alert in there to ensure that the yesPages array is building properly--it does. When the student clicks on next, I get an alert that says "1000,1001" and so on and so forth, each time adding whatever page they're on to the end of the array. Oh, and it also will sort them appropriately, too. That way, if the student jumps around in the index, the array is still sorted numerically like so: "1000, 1001, 2020, 3001, 3002, 4000."
Here's my accordion code:
   <div spry:region="courseData topicList pageLister topicData">
   <div id="Accordion1" class="Accordion" tabindex="0">
     <div spry:repeat="courseData" class="AccordionPanel">
        <div class="AccordionPanelTab">{lessonTitle}</div>
        <div class="AccordionPanelContent">
             <div spry:repeat="topicList">
    <div id="{lessonTitle}" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">   {topicList::topicTitle}</div>
         <div class="AccordionPanelContent">
                      <div spry:repeat="pageLister">
                             <div spry:choose="spry:choose">
                                  <div spry:when="'yesPages.search({@pageNo})' != '-1'">√ {pageLister::pageTitler}</div>
                                   <div spry:when="'yesPages.search({@pageNo})' == '-1'">  {pageLister::pageTitler}</div>
                             </div>
                      </div>
          </div>
        </div>
    </div>
                      <script type="text/javascript">
                            var Accordion2 = new Spry.Widget.Accordion("{lessonTitle}",{ useFixedPanelHeights: false });
                      </script>
             </div>
        </div>
     </div>
   </div>
            <script type="text/javascript">
                  var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false });
            </script>
</div>
Not sure if I copied all the </div>s to here or not, but they're all there in my code. Anyway, courseData, topicList, pageData, and topicData are all datasets. topicList and pageLister are nested datasets within courseData and topicData respectively. {@pageNo} is the page number in my XML. What I'm trying to do with the .search of the pageNo is to ensure that that page number exists within the yesPages array. If it does, put the checkmark beside it. Otherwise, leave it unchecked.
What I'm getting instead is a full list of all the pages, and they are all checkmarked. If I put a quick alert in there of yesPages, I get only the pages that they've seen. So, this doesn't make sense as to why it's not behaving correctly.
Anyone have an idea?

Well, we're on the right track. By changing Accordion2 to {lessonTitle}, it now allows me to accordion the first topic of each lesson. However, the subsequent topics of each lesson still won't accordion. This is so weird. You would think that if one would do it, all of them would.

Accordion Spry is defaulting to all tabs open. What's wrong?

Hi,
I had my accordion spry working perfectly a week ago. Then, I tried to add another panel at the top, and all of a sudden all tabs default open. I'd like them to go back to all being closed on default. I've been over my coding again and again for a week and can't figure out what I did wrong. I can get the first panel to close on default by changing the default panel to -1, but that only makes the other panels look odd for being open. Here's my code shortened to the important parts:
<div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love...
(rest of content + 5 more tabs)
</div><script type="text/javascript">

</script>
my url is: http://www.7elementsBR.com/courses
Can anyone help me figure this puzzle out? Thank you.

C F McBlob wrote:
There are SEVERAL paragraph tags that are "unclosed". That can throw the whole Spry function off.
No, it can't. The closing tag of a paragraph is optional. The reason it's triggering an error in the W3C validator is because an XHTML doctype is being used. Many of the other "errors" are caused by the JavaScript being read by the validator as though it were HTML.
However, you're right about unclosed tags. The problem with the accordion is being cause by incorrectly nested divs.
This is how the content div should look:
<div class="content">
    <h1>Courses (Fall 2013) </h1>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love being in a class with your friends/family learning exactly what you like learning and on your schedule? You can customize what materials you use, how often you come, the time you come, studying only abstract or realism, maybe a little bit of everything? Price is determined by your selections.
          <p><a href="customcourse.html">Custom Course Form</a><br />
        </div>
        </div> 
        <div class="AccordionPanel">
        <div class="AccordionPanelTab">Basic Art (ages 6 - 12)</div>
        <div class="AccordionPanelContent">
          <p>Mondays 4:30 - 6pm (No longer accepting Fall registrations.)     </p>
          <p>Students will get to sample these various mediums: pencil, charcoal, soft pastel, oil pastel, printmaking, watercolor, and acrylic painting. We will explore all 7 elements of art in order to create a good foundation for our young artists. Students are welcome to bring papers or canvas to create on, or feel free to visit the <a href="shop.html">shop</a>. All mediums are available for use and are included in the price. Course begins August 12.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Drawing (ages 6+)</div>
        <div class="AccordionPanelContent">
        <p>Thursdays 4:30 - 6pm (No longer accepting Fall registrations.)</p>
          <p>Students will learn the 7 elements of art through various drawing tools including: pencil, charcoal, soft pastel, and oil pastel. This is a class based on realism first, and finding your own style as an artist later. Students are welcome to bring papers to draw on, or feel free to visit the shop. All mediums are available for use and are included in the price. Course begins August 15.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </p></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Open Studio </div>
        <div class="AccordionPanelContent">
        <p>Monday - Friday, 12 - 4pm (Call ahead of time @ 225.366.7442)</p>
          <p>This course is all about the artist as an individual. Instruction is not provided, and artists may come and go as pleased. Weekly critiques are Fridays 3 - 4pm and are not mandatory, but allow for feedback from multiple artists and provide answers for you to grow as an artist. Artists may work with any medium, and may choose to rent media for $5/hour. The studio is not open on 1st Fridays, holidays, Easter week, Halloween week, Thanksgiving week, or Christmas week. </p>
          <p>Pricing: $5/hour or FREE for current students</p></div>
      </div>
            </div> 
            <script type="text/javascript">

</script>
    
    <p> </p>
    <p><a href="referafriend.html"><img src="images/refer.gif" alt="refer a friend" width="228" height="64" longdesc="images/refer.gif" align="right" /></a></p>
</div>

The unclosed paragraph tags should also be fixed, but what's causing the problem with the accordion is incorrectly nested divs.

Accordion spry

Is there a way to make it so that when you go to the accordion spry, all the tabs are closed initally. Currently, when I go to the accordion spry, the first tab is open and all the rest are closed.

@Sudarshan,
On a sidenote, Spry has been deprecated and is no longer officially supported or actively developed by Adobe
Isn't it a sad situation? The current version of DW is CS6. This version supports Spry. It has been purchased - and is still being purchased - in good faith. It is not until a DW user is confronted with a Spry problem, that he/she finds out that Spry is no longer supported.
Compare that with buying a new car and, as you drive out of the showroom, being told that the warranty has run out by saying "we do not support this model anymore".
Something is very wrong here.

Accordion Spry not collapsing in IE but it is in other browsers even Chrome

This is my first Accordion Spry that I am creating and I
cannot figure out why it is not
fully collapsing in IE but it is working flawlessly in all
the other browsers.
Pleease check out the site,
http://www.enrieap.com/. The
accroding is on the right.
Thank you.

If the above didn't help then please attach a screenshot.
*http://en.wikipedia.org/wiki/Screenshot
*https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
Use a compressed image type like PNG or JPG to save the screenshot.

Accordion Spry Widget default loading behaviour

Am using the accordion spry widget to display some
spring/summer courses and
I need all panels closed when the page first loads. I've
tried to find the
relevant code, but have not been successful in changing it to
make this
work. If I change the behaviour of the 'this.defaultPanel'
the whole
accordion stops working. How can I change the accordion
behaviour to have
all panels closed at page load?
Thanks for any help.
Marianne

Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Lorem Ipsum : about us</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="css/main.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style></head>
<body
onload="MM_preloadImages('images/menu_images/nav_a2_f2.jpg','images/menu_images/nav_a3_f2 .jpg','images/menu_images/nav_a4_f2.jpg','images/menu_images/nav_a5_f2.jpg','images/menu_i mages/nav_a6_f2.jpg')">
<div id="homebg">
<div id="spry1">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry1.jpg" width="747"
height="35" alt="Vision / Purpose / Mission" /></div>
<div class="AccordionPanelContent">
<table width="744" height="179" border="0">
<tr>
<td width="95" height="175"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Vision:</strong>
Lorem Ipsum Dolor</p>
<p><strong>Purpose:</strong> Lorem ipsum
dolor.</p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry2.jpg" width="746"
height="34" alt="Guiding Principles / Core Values"
/></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Integrity</strong><br
/>
Lorem Ipsum</p>
<p><strong>Understanding</strong><br
/>
Lorem Ipsum</p>
<p> <strong>Innovation</strong><br
/>
Lorem Ipsum</p>
<p><strong>Perseverance</strong><br
/>
Lorem Ipsum</p>
<p><strong>Simplicity</strong><br />
Lorem Ipsum</p>
<p> <strong>Lorem
Ipsum</strong></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry3.jpg" width="746"
height="34" alt="Lorem Ipsum" /></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Lorem
Ipsum</strong><br />
<br />
<br />
<a href="mailto:blahblah</a></p>
<p><strong>Lorem Ipsum</strong><br
/>
<br />
<br />
<a href="mailto:blahblah"</a></p>
<p><strong></strong><br />
Manager<br />
9<br />
<a href="mailto:blahblah</a></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
</div>
<h6></h6>
</div>
<div id="text">
<h1>about us
<p>Lorem Ipsum </h1>
<p> </p>
</div>
<img src="images/bg_images/bg_interior.jpg" width="1374"
height="931" /></div>
<script type="text/javascript">

</script>
</body>
</html>

Accordion Spry panel sizes

CS3 Accordion spry (can't see version in html) and I want to
make 1 of the panels a different size that the others. I have
already used the useFixedPanelHeights: false, defaultPanel: -1, so
they all close. I have text in the first panel and want to set the
height just to fit the size?

Hi,
to find out which Spry version do you have, open the
SpryAccordion.css file or the SpryAccordion.js file and look at the
beginning of these files. You should see there the Spry pre-release
version.
You probably have Spry 1.4 because this behavior works only
on spry 1.5.
An working sample you can find
here.
Diana

Close accordion spry when clicked

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Nested accordion spry

Can someone please give me some direction as to how to do a nested accordion spry with different tabbed panel widths? Thanks

Never seen that done with an accordion. Why would you want different widths? Not sure what you mean by "nested" as well. I've placed accordions inside sidebars, inside Spry tabbed panels, and even in another accordion. You simply have to make a few CSS changes so it doesn't conflict with other Spry elements (change IDs).

Accordion Spry default all panels closed

How do I setup the Accordion Spry to have all panels closed
when my page initially loads? I don't want any of the panels to be
set as the default opened panel and for the browser to select the
panel they want open first.

I have installed Spry 1.6.1.
Here is my code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
defaultpanel: -1 });
Still opens the first panel upon loading my page with the
Accordion spry. There must be something else to be
configured?

Spry Accordion collapsing problem

I am using an accordion on my site, and also took the advice to update to the latest spry, which didn't seem to make a lot of difference to be honest (I am using DW CS3)
But the problem I am having is when you first come to the page the menu isn't completely collapsed and I wonder if there is a way of doing this...
This is not happening in latest firefox, IE8 or safari on a windows pc
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* 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 {
width: 174px;
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.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
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 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* 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;

Teisho wrote:
Thanks for your answer, the problem that I still have is that I am trying to close all the Accordions when clicking
on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
thanks Ant
I am not sure what you want to do here. When you click on an open panel, the panel closes; when you click on a closed panel, it opens and closes any panel that is open.
Please explain.
Sorry, did not see your new post which does explain what you want.
Message was edited by: vw2ureg

Spry Accordion Widget problems - please help

I've been trying to modify the settings for an accordion
widget - basically to open the widget with no panels open, and to
have varying panel heights. I have been to the help and the lab
forums and have put in the code, but alas, nothing worked. So I
downloaded the 1.5 prerelease just to see - and saw there was an
example of exactly what I wanted to do! (AccordionSample.html)
however when I went to preview this in DW CS3, it did not work ...
it did the same thing that mine was doing - opening all the panels,
and none were clickable. Is this something you cannot test locally?
Does it have to be on a test server? I am running this on a G5 with
10.4.9, if that helps at all.
Hmmm - uploaded it to my web server and still get the same
thing ... here's the
link:

Hi!
The version of the spry files on your server are 1.3, not 1.5
- hence using the options from 1.5 with the 1.3 files won't work
(they don't understand the options).
You need to a) update the spry files in DW CS3 to 1.5 so that
they will work with DW, and b) update the spry files on the
webserver to 1.5, as DW will not overwrite them itself incase you
changed something in them.
See:
here
for details

How do I make my accordion spry not "jump" or "hiccup" in IE??

Ok, sorry you guys, I'm a newbie.
It seems that no matter what I do, I can't get the accordion to co-operate with Internet Explorer. It has always jumped when tabs are clicked and then settles down. It's rather irritating and I would like to fix it. I've run out of things to try. Can anyone help?
In addition, with attempts to make keep the accordion and background centered I used a div with the position centered, which worked, but only in FF and Chrome. In IE it stays far left. When I had it in a table, I could set a left: px in the class, but never figured out how to center it with a table so it would change position based on the monitor resolution. If there's a better way to do this that IE and other browsers like, please help me. If it's just IE that has the problem is there any way to make it like my code?
If you can help me change the height of the accordion, that would be great. It seems it doesn't want to stretch out, but maybe I'm writing it in the wrong section or the wrong way.
Another minor issue is the IE not doing the transparency I set on the tabs. I heard that they took that feature out. Is that true or is there a way to set it for IE?
Here's what I have so far:
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bonnie Praymayer</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<table id="big">
    <tr>
     <td><table width="200" border="1" id="table" name="table">
       <tr>
         <td><div id="Accordion1" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
             <span class="tabContent">Benefiting People Like You
             </span>
             </div>
             <div class="AccordionPanelContent">
                   <div class="panelContent">
                 <p >I specialize in deep tissue massage. As you may know already, massage therapy is the manipulation of soft tissue with the goal to improve well-being and heal injuries. It can involve just about any part of the body, but generally most people have stiffness and injuries in the back and neck. I enjoy using this type of health maintenance to assist people like you. Massage therapy can be used to improve many ailments such as:</p>
                 <p >Muscle Strains, Sprains, Headaches, Migraines, Fibromyalgia, Edema, and High Blood Pressure</p>
                 <p >Beyond "ailments" massage is excellent for treating sore muscles in pregnant women as well as reducing stress in everyone.</p>
                 <p > </p>
               </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                 <span class="tabContent"> Reflexology - An Added Benefit
                 </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >In addition to massage therapy, I am certified to practice Reflexology of the feet. This is a therapy wherein pressure is applied to the feet to encourage the body to heal itself. It's as if the feet are a map to the body with the spine being the edge of what is known as the arch. There are key points such as the heart and lungs, sinuses, kidneys, and intestinal tract. </p>
               <p> </p>Reflexology has been known to also be an indicator to hidden health issues. Many reflexologists can attest to the fact that upon finding sore areas in the feet, the corresponding organ(s) have later been discovered by a physician to be injured or diseased. It is not a replacement for healthcare, but for some, reflexology has proven to be an asset to gain knowledge of the workings of their body.<p></p>
               <p >One thing to note: if you do receive a reflexology treatment it is normal to feel a little dizzy, fatigued, or flu-like if you don't hydrate yourself before and after.</p>
            </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                     <span class="tabContent"> How to Choose a Therapist
                     </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >To be honest, everyone has preferences for what he or she like in a massage, so there is no hard and fast rule. What I recommend is that you decide what you need treated whether it be muscle strain, stiff muscles, stress, poor circulation etc. You can decide what kind of massage you need based on what you decide you want massage to do for you.</p>
               <p >If you need to de-stress, relax and do not have many sore stiff muscles then simple relaxation massage would be good for you. If you have a constant sore shoulder or neck then you really need a therapist that is capable of effectively loosening those fibres.</p>
               <p >You may be able to determine if a therapist is right for you by talking with someone who has had a massage from that person. Otherwise, you can sometimes judge by the type of facility in which they are practicing. Typically a spa is going to give you strictly relaxation, although many therapists are capable of more if you request it. A chiropractor's clinic will often focus on rehabilitation of injured patients; more often than not they have massage therapists that are more than capable of working deep enough to affect injured tissue.></p>
               <p > Communication is the key when it comes to during the treatment in order to customize and optimize your massage experience. Don't be afraid to speak up if you need to adjust the technique or pressure. After all, the massage is all about you!</p></div><p></p>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab"><span class="tabContent">My Practice</span></div>
             <div class="AccordionPanelContent">
                 <div class="panelContent">
               <p>My interest in massage therapy began at a very early age. Although I didn't know it was an actual profession, I started massaging at the age of 8 as I did my best to alievinate my mother's chronic pain from fibromyalgia. I, through time gained a natrual feel for detecting prolblem areas in the muscle and I learned what pressure is appropriate. </p>
               <p>I took my training in 2006 at the Alberta Insitute of Massage for six months to earn a certificate for a 1100 hour program. Though short, it was intensive in the anatomy and physiology portion and very hands-on in the massage classes. It was my privilege to learn from three instructors who had more than 10 years experience as massage therapists and many years teaching it.</p>
               <p>Since my training, I have had the opporutinty to work as a massage therapist for 3 years. I have treated people from all walks of life for countless ailments and injuries. It is my pleasure to do my utmost to see to it that each paitent recieves the treament they deserve and expect.</p>
               </div>
             </div>
           </div>
         </div></td>
       </tr>
     </table></td>
    </tr>
</table>
<script type="text/javascript">

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
    background-image:url(../Images/WaterLeaf_Exp.png);
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:scroll;
    background-color:#222222;
.panelContent {
    color: #dcd2d2;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 15px;
    margin-top: 20px;
.tabContent {
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    padding: 15px;
#big {
    /*background-image*/
    background-repeat:no-repeat;
    border: none;
    top: 0px;
    margin-left: 23.5%;
    position: static;
    height: 800px;
    width: 955px;
#table {
    width: 700px;
    height: 290px;
    /*margin-top: 1%;
    margin-left: 125px;*/
    border: none;
    position: relative;
    z-index: 2;
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - 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: #FFF;
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* 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;
    height: 200px;
/* 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: #cccccc;*/
/* 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: #93C;
    filter:alpha(opacity= 50);
    opacity: 0.5;
    -moz-opacity:0.5;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #cccccc;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* 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:hover {
    background-color: #FFF;
    filter:alpha(opacity= 20);
    opacity: 0.2;
    -moz-opacity:0.2;
.AccorrdionPanelOpen:hover {
    filter:alpha(opacity= 90);
    opacity: 0.9;
    -moz-opacity:0.9;
    color:#F00
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #390;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;

You would make this a little easier if you posted a link to the page.
Most of the jump seems to be some extra padding or margin between the tabs when you rollover, but I am not able to find it. Is there any other css that is governing this page? I did remove a couple of <p></p> set of tags you had and it improved the jump, but it is still there.
If the page is live, run it through the validator http://validator.w3.org/ , fix whatever errors it finds, if you still have the jump, post a link to the page and the issue might get found.
Gary

Accordion defaultPanel problem

Hi Everyone, I'm using Spry Accordion as a menu and im
loading the data from an xml file, and that part is working fine :D
the problem is if I try to set the defaultPanel to anything else
besides "0" like the following
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: 5});
</script>
It only highlights the panel and doesn't open
Here's the source code
XML file:
==================================================================
<?xml version="1.0" encoding="utf-8"?>
<NewDataSet Nivel="1">
<Content>
<IdMenu>1</IdMenu>
<Menu>Introduction1</Menu>
<SunMenu1>SUB1</SunMenu1>
<Link1>Link 1</Link1>
<Link2>Link 2</Link2>
<Link3>Link 3</Link3>
<Link4>Link 4</Link4>
<Link5>Link 5</Link5>
<URL1>URL1</URL1>
<URL2>URL2</URL2>
<URL3>URL3</URL3>
<URL4>URL4</URL4>
<URL5>URL5</URL5>
</Content>
<Content>
<IdMenu>2</IdMenu>
<Menu>Introduction2</Menu>
<Link1>Link 1</Link1>
<Link2>Link 2</Link2>
<Link3>Link 3</Link3>
<URL1>URL1</URL1>
<URL2>URL2</URL2>
<URL3>URL3</URL3>
</Content>
</NewDataSet>
==============================================================
HTML File:
==============================================================
<div spry:region="strategic1">
<div id="Accordion1" class="Accordion" tabindex="0">

<div spry:repeat="strategic1" class="AccordionPanel">
<div
class="AccordionPanelTab">{strategic1::Menu}</div>
<div class="AccordionPanelContent">
<a href="{URL1}"
class="SubMenu">{Link1}</a><br />
<a href="{URL2}"
class="SubMenu">{Link2}</a><br />
<a href="{URL3}"
class="SubMenu">{Link3}</a><br />
<a href="{URL4}"
class="SubMenu">{Link4}</a><br />
<a href="{URL5}"
class="SubMenu">{Link5}</a><br />
</div>
</div>
</div>

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: 5});
</script>

</div>

<script type="text/javascript">
var strategic1 = new Spry.Data.XMLDataSet("Strategic.xml",
"NewDataSet/Content");
//-->
</script>
Thanks in advance

This forum is to discuss the forums, not products
You need to ask your question in the forum for the Adobe product you are using
How to Select a Forum http://forums.adobe.com/docs/DOC-1015

Dreamweaver accordion spry

Hi all,
Hoping someone can help me with this one. I have a drop down
menu on one page which when I click a submenu item, opens a spry
accordion panel on a different page. The panel item that opens
depends on which sub menu item is selected on the afore mentioned
page. Problem is that if the accordion panel that opens is small
and then I click another accordion panel tab it cuts off part of
the content if it is larger that the content in the previously
viewed panel. This only occurs when I use the drop down menu to
display the page that contains the panel and then click another
panel tab after that. If I open the page that contains the
accordion panel directly I can switch different panels with
absolutely no problem. This has me stumped I am afraid.
Thanks

This is the problem
.AccordionPanelContent {margin-bottom:25px; margin-top:5px;}
Change the values to 0 (zero) and all is well.
To give the top and bottom some space, either insert <p> </p> or give the paragraph a style rule.
Gramps

Accordion Spry problem

Similar Messages

Maybe you are looking for