Spry Accordion Problems

Hi.
I would like to ensure that menus stay open while the visitor
is browsing sub menu items
Please visit my site to see what I mean:
jeffcooperdesign.co.uk/devonsailingtemp
Click on Adventure Sailing, the menu opens, then click on
Around Britain. You are taken to the page but the menu has reverted
to its closed state. I would like the Adventure Sailing menu to
stay open all the while the user is browsing its submenus.
Thanks

Then what you need it's collapsible panel. Have a look:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Thogh you'll need to upgrade your spry version to 1.6.1. Here
is the
link to do it:
http://labs.adobe.com/technologies/spry/home.html
Jeff R Cooper wrote:
> Hi.
>
> I would like to ensure that menus stay open while the
visitor is browsing sub
> menu items
>
> Please visit my site to see what I mean:
> jeffcooperdesign.co.uk/devonsailingtemp
>
> Click on Adventure Sailing, the menu opens, then click
on Around Britain. You
> are taken to the page but the menu has reverted to its
closed state. I would
> like the Adventure Sailing menu to stay open all the
while the user is browsing
> its submenus.
>
> Thanks
>
>
>
>

Similar Messages

Spry Accordion Problem in IE7

Hi,
I have created a Spry Accordion containing 7 sections, using CS4. It works perfectly in Firefox, however there is a strange bug in IE7. The top section requires the scrollbar and this is working ok. However, the other 6 sections all have the same problem (btw, none of these other 6 are needing the scrollbar as the text does not fill the content area) - the bottom line of text in each of the 6 other accordion sections is not displayed. All the other text in the 6 sections is ok (other than the fact that the top margin is non-existent - I assume that can be fixed fairly easily)
Has anyone else had this problem, and are there any know fixes?
many thanks for any help offered

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

Spry Accordion Problem in Internet Explorer

Hi,
i have created a spry accordion menu in Dreamweaver CS3. My
problem is that when I click in Internet Explorer, small selection
handles appear all round the accordion object. This looks quite
poor then. Any ideas how I can get rid of these?
Thanks.

Except for the fact that Spry Accordions are involved, the problem is hardly Spry related.
Having said that, I will try to help you on your way to solving your problem.
The following is a list of my observations
the <div id="wrapper"> on line 74 does not have an ending tag
<div class="right-column" has 35px padding on the right but not on the left. Because IE interprets the so-called box model differntly to other browsers, and because the div is floated right, the left edge of the div will be pushed further to the left than on other browsers. It may be an idea to put at least some of the padding on the left to keep it clear of the divider line
the field set in your contact form is 460px wide, the div surrounding it is only 440px and again IE reacts differntly to other browsers in that it expands the parent to suit the child. Try reducing the width of the fieldset to say 400px.

Spry Accordion problem using URLutilis

Hi, I'm using a spry accordion and have the 3rd panel opening as default.
I'm now trying to use URLutilis to open a specific accordion panel from another html page,
but as soon as I amend the target page code, all the panels of my accordion default to open.
This is the code I'm using in the head:
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
This is the code I'm using in the body:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 1});
I still have SpryAccordion.js set as:
this.defaultPanel = 2;
Could someone let me know where I'm going wrong and why all panels are now open?
Cheers,
Andy

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

Spry Accordion problem in IE8

Hi to all
I created a menu item list using the spry accordion for the left menu on a website. The spry works perfectly when I'm testing the site locally, but when I load the site directly to the ftp server and test it on the web, the spry accordion wont work at all. There´s no animation, the tabs that have content only shows scrolling bars. I added the .css and .js styles to the site but is not working.
You can view the site here. It´s the left menu.
Thanks in advance...

Hi, it looks like there is a problem with the javascript at the bottom of your page. There is an error with the line "swfobject.registerObject("FlashID");" (line 226). And that is keeping your accordion declaration from happening. If you fix the error (which is 'swfobject is not defined') the panel should work properly. Quick fix is to move the accordion declaration statement above the statement causing the error. Hope this helps.
Dan

I have a spry accordion problem with IE.

When I scrol down and open a panel in my spry accordion something decides to go to the first panel.
After that I have to scroll down to the opened panel.
I want to see the opened panel at once when I opened it and not go to the top of my page first.
This is no problem in ff, safari and chrome. That works fine.
Any one knows this problem and how do I solve it?
Thanks.
http://www.zeelandseaport.nl

those here
http://labs.adobe.com/technologies/spry/

Spry accordion problem with IE

I tried to make a site using all different spry-widgets, so I
made tabbed panels and in them accordion panels (and in other
panels other spry-things). It works well in FF but in IE the
accordionpanels stay all open.
Can someone help me out.
Many thanks

those here
http://labs.adobe.com/technologies/spry/

Spry accordion problem

I have rebuilt my PC, and I have got a website that has had an accordion for years and it has worked fine until doing my PC rebuild... the accordion doesn't collapse anymore. It stays open, however this only happens locally; the live site still works fine, so I can't even show it to you. What has gone wrong for me locallly?
Thanks
Mat

I have tried that. The funny thing is there is a sister site that has pretty much the same javascript and css apart from colours and that works fine both on the live site AND locally.
Is the default spry framework in CS4 the most recent? I recall that when CS3 came out, I had to update that because accordions didn't close fully, and that was addressed in the update. However, that shouldn't have any bearing on an accordion which is already created as the code for was written years ago.

Colour problem with Spry Accordion

Hi, I'm trying to create a website with a spry accordion. I've had some trouble with it (as I'm not good at CSS, it's new to me) and I've solved them all except for one: a problem with the colour of the bar when the section is open.
This is my website: http://s313354774.mialojamiento.es/saibe/design3/Publish/INICI.html
When the menu is closed everything is ok, but when you open it then the colour changes, making a gradation between the new colour and the original one. I've checked the stylesheet and there the original colour doesn't appear anywhere, so it's wierd to me.
Does anyone know why is it happenning? If i'ts because something stupid forgive me, as I told you this is quite new to me and I'm trying to learn day by day.
Sergi

Segi,
This one has got me stumped. If I copy your SpryAccordion.css and apply my copy to the document, there is no problem. Have a look here http://pleysier.com.au/sergi/
I know this will not help except to say, that if you change
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
to
<link href="http://pleysier.com.au/SpryAccordion.css" rel="stylesheet" type="text/css" />
see what happens.
Gramps

Using Spry Accordion as menu problem

I am using the Spry Accordion widget as a menu/table of contents in a website and have encountered an issue that needs customization that I cannot seem to find anywhere.
Here is the link: http://2ndlookgraphics.com/slProfile/index.html
I have placed the menu in an iframe with links pointing to "parent" which seems to work well.
My problem is that whenever a link is clicked in any other than the first panel the menu reverts to the opening stance with te first panel open.
I would like, if possible to have the the panel that is currently being accessed to stay open until another tab is opened.
If this is not possible it would be best if the first panel were initially closed and if the accordian effect would initiate on hover rather than click.
I am using a "Fluid Grid" responsive layout but that does not seem to be affecting this issue.
I would appreciate some advice on this please.

All panels closed -
<script type="text/javascript">

</script>
More here:
http://adobe.github.io/Spry/articles/data_api/apis/accordion.html

Spry Accordion gains scroll bars in IE7

Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!

Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks

Spry Accordion Hover/Active Issue

I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional. The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded. Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/faq.html
Spry 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 {
    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 {
    border-top: solid 1px black;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url(/content-opaque.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    background-color: #300;
    font-size: 12px;
/* 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 {
    margin: 0px;
    padding: 2px;
    background-image: url(../infobkgd.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    overflow: hidden;
    height: 40
[x;
    height: 100%;
/* 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: #000033;
/* 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: #FFFFFF;
    background-color: #003;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #FFFFFF;
/* 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: #003;
/* 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: #000033;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
Layout CSS
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Donate Today!</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/donatepage.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
<div id="navigation">
    <ul id="donatemenu" class="MenuBarHorizontal">
      <li><a href="profile.html">home</a>      </li>
      <li><a href="theride.html">the ride</a></li>
      <li><a href="donate.html">donate</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">gallery</a>
        <ul>
          <li><a href="photo-gallery.html">photo</a></li>
          <li><a href="video-gallery.html">video</a></li>
        </ul>
      </li>
      <li><a href="faq.html">FAQs</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
</div>
<span class="AccordionPanel">
<div class="AccordionPanelTab"></div>
</span>
<div id="faq-content">
    <div id="faq-accordion" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Is this ride still going on?</div>
        <div class="AccordionPanelContent">A: Yes</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
        <div class="AccordionPanelContent">A: Saturday, September 7th.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
        <div class="AccordionPanelContent">A: Online registration will begin in May. Check-in at 8:00am on September 7th.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Where is check-in?</div>
        <div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will the route be the same?</div>
        <div class="AccordionPanelContent">A: We have changed the route this year few a few reasons. You can visit the route map to see.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by. What time will you be on our street?</div>
        <div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
        <div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What does that give me?</div>
        <div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
        <div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis. However, as we got larger, the costs associated with putting the ride together grew immensely. The minimum donation allows for us to cover the costs for the ride. However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
        <div class="AccordionPanelContent">A: Of course. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
        <div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors.   Those will be announced at a later date.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
        <div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
        <div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
        <div class="AccordionPanelContent">A: Yes</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are scooters allowed?</div>
        <div class="AccordionPanelContent">A: Eh, sure, why not?</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
        <div class="AccordionPanelContent">A: Probably. We usually do not know about their appearance ahead of time. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
        <div class="AccordionPanelContent">A: A little</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
        <div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: There will.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: Yes.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is my cost?</div>
        <div class="AccordionPanelContent">A: General Public $40. Student $20. Bikers the day of $40.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
        <div class="AccordionPanelContent">A: No.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
        <div class="AccordionPanelContent">A: Food - $5, Drink - $2, Beer - $5</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
        <div class="AccordionPanelContent">A: Yes.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: That’s awesome. I love you.</div>
        <div class="AccordionPanelContent">A: Control yourself.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
        <div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
        <div class="AccordionPanelContent">A: Click here and fill out our application. It’s a lot easier than taking the S.A.T.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: Certainly! Click here for our sponsorship packet.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
        <div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
        <div class="AccordionPanelContent">A: Yup</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
        <div class="AccordionPanelContent">A: We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
        <div class="AccordionPanelContent">A: We admit it was slow. We know, we know. Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little. Also, the new route allows us go faster through town.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
        <div class="AccordionPanelContent">A: The base will not allow that.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
        <div class="AccordionPanelContent">Content 34</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
        <div class="AccordionPanelContent">A: Negatory. Every individual is his/her own team. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
        <div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the WHF?</div>
        <div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
      </div>
    </div>
</div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
</script>
</body>
</html>
Screenshot of how it looks locally in Dreamweaver:

SpryAccordion.css
You have an error that is killing the rest of your code shown below in red. Remove it.
.AccordionPanelContent {
    margin: 0px;
    padding: 2px; /**suggest using 12px or more**/
    background-image: url(../infobkgd.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px; /**suggest using 16px or more**/
    color: #FFF;
    overflow: hidden;
    height: 40
[x;
    height: 100%;
Nancy O.

Spry Accordion not working in IE7 and IE6

My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
The site is www.christendom.edu/n. It is there on the left. I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
Please help!

Remove the offending comma (marked in red)
var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
I hope this helps.
Ben

How to create anchor links within a spry accordion?

I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?

I am using the spry accordion from DW CS6. HAving 6 panels.
I want to do this but can't manage it the usual html way...and I am clueless about javascript:
I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
Any help would be very appreciated on this matter.
One other problem I am having is this:
My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?

Strange behavior of Spry Accordion in IE

Hi there,
I am using DW CS3 and I inserted a spry Accordion in the html
page. I added about 15 or so panels to the accordion. It works fine
in Firefox but in IE 6 when I click on a panel that is some where
in the middle or at the bottom of the page, the page moves up where
the first panel is located in the page as if I clicked on first
panel.
Any idea what is going on?
Thanks
Joe

I am having exactly this same problem. I've made up an
example at
www.24031951.com/AccordionTest.html.
It uses Spry 1.6.1, // SpryAccordion.js - version 0.15 - Spry
Pre-Release 1.6.1 and doesn't use "tabindex"
There is also a live site using the Spry Accordion at
www.SETZERiZER.eu/en/health.php
where the same problem exists.
Any suggestions?
with regards,
Dr. Rusty

Spry Accordion Problems

Similar Messages

Maybe you are looking for