Spry Accordian in navigation

Hi,
I am new to the spry and I am using DW CS 3 from a Mac
(Leopard). It's a cool effect that help designers me who are new to
scripting or no background at all. I am trying to use the Spry
Accordian in my navigation as a vertical menu with sub categories
inside each panel content. My client want to use a specific font so
I cannot use regular fonts inside the accordian. So I am using jpeg
button images as roll over, both inside the panel and panel
contents. I have figured out things like variable heights in
panels, setting default panels etc. and it works well.
However the issue is my client says that on IE on a PC the
whole thing is shaky when navigating, as it jumps around in
transition which I noticed even on my Safari. After searching
through your help forums I saw a similar post and the
recommendation was update the Spry to 1.6. I did that I it seems to
have helped it localy on my computer in Safari. I haven't changed
it on the test site as I wanted an expert from here to look at it
and let me know if I am on the right track or if I need to do
anything else.
You can see what my client is referring to when you are in
OUR PEOPLE category (select a bio) and then try to select OUR
SOLUTIONS (again select a sub category) and the whole accordian
jumps and shifts before settling down the way I want it. Any help
you can give me is much appreciated.. and please note that I am
basically a designer and not a programmer, so my knowledge on
scripts are limited...
Here's the URL to the test site:
http://www.canlanka.com/ignition/company.html

Thanks for your reply.....
The reason I am using images are because the client wants the
corporate font (Antique Olive) at least used on the buttons and
headline. This prevents me using the CSS styles and I am not
proficient enough to find a way to embed this particular font. I
can change the jpegs into giffs as you suggested if that helps. I
am also wondering if the staggered loading is anything to do with
the overflow setting on the panels in the SpryAccordian.css file? I
had to change it to visible in order to go in and change the image
as they are selected, after which I have kept the setting as
AUTO... may be is should be HIDDEN... or it may got n0thing to do
with the issue... but I am running out of options here....

Similar Messages

Spry Accordian Tabs Question

Hi
I'm trying to create a spry accordian menu for a navbar and am having some trouble.
This is the first time I've tried it so I would appreciate any help.
The Client would like the tabs to be:
Home
Students
   High School Students
   College Students
Professionals
Parents/Educators
Seminars
Bio
Q & A Blog
Testimonials
So all they would like High School Students and College Students to be child tabs underneath the parent tabs and all other tabs to be parent tabs.
They asked for a spry accordian.
They want the nav bar to be on the left.
Here is the link to the website online:
http://www.elynncohen.com/index2spry2.html#
and here are my questions:
1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
Any help would be much appreciated!
Thanks!!!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header">
    <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
    ; display:block;" /></a></p>
    <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
    <p class="clearfloat"> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li>
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Home</a></div>
            <div class="AccordionPanelContent">Content 1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Students</a></div>
            <div class="AccordionPanelContent"><a href="#">High School</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Professional</a></div>
            <div class="AccordionPanelContent">Content 3</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
            <div class="AccordionPanelContent">Content 4</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
            <div class="AccordionPanelContent">Content 5</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Bio</a></div>
            <div class="AccordionPanelContent">Content 6</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
            <div class="AccordionPanelContent">Content 7</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
            <div class="AccordionPanelContent">Content 8</div>
          </div>
        </div>
      </li>
    </ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
      <br><br><li><strong>Considering your college choices & career options</strong></li>
      <li><strong>Preparing for the world of work after college</strong></li>
      <li><strong>Seeking a new position to further your career</strong></li>
      <li><strong>In-transition and considering new opportunities</strong></li>
      <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
    </ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
    <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
    <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
     <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
     <p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
    <div id="footer">
      <h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
    </div>
    <p> </p>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
1. Line 454
<div id="Accordion1" class="Accordion" tabindex="0" style="outline: none;">
2 & 3. Change your code from Line 455 - 491:
<div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Home</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Students</a></div>
            <div class="AccordionPanelContent"><a href="#">High School</a><br/><a href="#" style="margin-top: -30px;">College</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Professional</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Bio</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
          </div>
        </div>
      </li>
    </ul>
</div>
4. Append your HTML for child tabs like this:
<div class="AccordionPanelContent" id="submenu"><a href="#">High School</a></div>
Create a new #submenu css rule in your CSS document and set styling the way you want it.

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 with dynamic panels from XML

Hi. I've searched, but haven't seen anybody answer this yet.
I'm trying to build a page that uses a spry accordian to display
data by category. So category 1 is on panel 1 in a spry table with
a link to a spry detail section on the page. Category 2 is on panel
2 in a spry table with a link to the same spry detail section, etc.
I have 2 issues: 1) I haven't figured out how to filter a
single XML data set onto different accordian panels or
2) how to get the same detail region to take links from
different XML data sets on the different panels.
Any help that anybody could give would be VERY much
appreciated.
THANKS!

I did get it working. Please check out..
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=602&threadid=1334877
The key is the Data Set Shell. I use multiple data sets for
each category, in your case department. Then I list the items in
that category to update a detail region. If the above link doesn't
help you please re-post and I can give you some more help.

Spry guru needed! Spry accordian works in ie, safari, chrome but not firefox. Rookie needs help!

Hey guys,
Spry accordian works in every other browser apart from firefox. Clearly I have done something stupid - anyone care to help me out?
URL is :
http://www.recruitercritic.com/bcrwd.htm
Thanks!
jono

G'day Mate,
Just remember the structure for a SpryAccordion.
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
In your case have a look at
    <div class="AccordionPanel">
      <div class="AccordionPanelTab"><img src="http://www.recruitercritic.com/rwdffbox.png" width="425" height="110" border="0" /></div>
      <div class="style21">
        <p align="justify" class="style7"><strong>Flight Centre are committed to providing great travel at the cheapest available price. Their highly trained experts are dedicated to finding the best travel deal for any destination and budget. </strong></p>
        <p align="justify" class="style18"><strong><span class="style7">Simply use RecruiterCritic to find, compare and engage a recruiter or search professional and fill your job vacancy and RecruiterCritic will send you a $1,000 gift voucher as our thanks for you to use for staff travel or as a staff incentive.</span> <a href="Freqflyer.htm">More info</a><a href="Freqflyer.htm"></a></strong></p>
        <p align="justify" class="style18"> </p>
      </div></div>
All you need to do is add the highlighted class
<div class="AccordionPanelContent style21">
Carn the Pies

Spry accordian problems in IE

I have created a website that uses the Spry accordian effect that has been modified to be used for sections for the site.
I have tested it on all browsers however found out that the spry accordian doesn't work in Internet explorer.
I have noticed there seems to be many problems regarding spry and IE, but not come across any that have definitive answer for my problem.
www.slicedesign.co.uk
Is there anybody who could shed some light ont his for me?
nathanslice

Hi,
I've looked at your site on IE7 / IE6 and Firefox 3.0.1 on my PC.
I suspect some of it might be down to the following bit of styling in your accordian CSS
.Accordion {
    overflow: hidden;
    height: 640px;
IE6 incorrectly interprets height as min height.
Try changing it to
.Accordion {
     overflow: hidden;
     min-height: 640px;
/* for IE6 and below */
* html .Accordion {
height: 100px;
Also you have repeated IDs when they should be unique within webpage and you have not closed various tags properly. Visit http://validator.w3.org/ and fix the markup errors and then let's see what your page then looks like. Internet Explorer is very fussy about closing tags properly and can stop rendering the page when it finds an error where as Firefox etc are more tolerant and can still rneder the page properly.
Cheers
Phil

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?

Spry Accordian - multiple sprys on same page?

How do you get two or more Spry Accordians on one page? The first one works fine, but the others don't.
Linda

Looks like you did not upload the dependent .js and .css files
I get a page not found error when I try and load this file referenced from your main page.
http://daphnevanessapierre.com/Spry-UI-1.7/includes/SpryDOMUtils.js.
Make sure that you have uploaded all of the files in the head in the correct location relative to the page that you inserted the slide show into.
-Scott Richards
Dreamweaver Team

Spry Accordian properties not editable in CS3

Hi all
Long time since I posted here :)
Got a problem with the Spry Accordian in CS3 - the properties
don't show
up so I can't edit the panels (except directly) and can't
stipulate
the default state, like open or closed etc. The only option,
if one can
call it that, is "remove the animated accordian".
Does anyone know if this is a known issue or just something
I've done wrong?
Thanks all,
Judi

Got it sorted thanks - well, on my Vista machine anyway.
"Judi Kruger" <[email protected]> wrote in message
news:fgerba$5ed$[email protected]..
> Hi all
>
> Long time since I posted here :)
>
> Got a problem with the Spry Accordian in CS3 - the
properties don't show
> up so I can't edit the panels (except directly) and
can't stipulate the
> default state, like open or closed etc. The only option,
if one can call
> it that, is "remove the animated accordian".
>
> Does anyone know if this is a known issue or just
something I've done
> wrong?
>
> Thanks all,
> Judi

Spry Accordian - Javascript Variable - Replace simple ASP

Hey Gang,
I'm not familiar with Javasscript Syntax as much as I'd like
to be.
But I need to quickly replace this simple VBScript for
grabbing a querysting
and using it in the page
Basically I'm using the Spry Accordian and setting the
default panel based
on a querystring variable.
There may be a far better way, but this is a quick example.
What I need is a Javascript solution.
Thanks
-Dave
<%
Select case Request.Querystring("p")
Case "0"
strPanel = "0"
Case "1"
strPanel = "1"
End select
%>
<script type="text/javascript">

</script>

Hi Gramps!
Appreciate your advice and reference to Backyard Furniture. I've been working on it and thought I was getting close...but the revised coding just created havoc on my site.
Could you please have a look at http://www.trafficnetwork.ecanvas.com.sg/TMA.html and advice?
Cheers!

Spry Accordian Widget

OK, I'm thinking this may be impossible to explain, but here
goes. I have a simple table. I install a Spry Accordian widget to
one of the table's columns, and the whole table (the who page
actually) explodes laterally, breaking apart pictures, and
segmenting what was just a simple table. What gives here? Any help
is MOST appreciated!!

add the option defaultPanel:-1 to the constructor
var bla = new
Spry.Widget.Accordion('id',{defaultPanel:-1});

Spry Accordian and Flash

I'm working on a Spry accordian that will display text and
Flash audio players. Unfortunately, the Flash audio player only
shows within the default tab only-not any of the others. I believe
this is part of Flash trying to conserve system resources. Some
browsers don't give pages and windows that are in the background
(or not visible or "below the fold") any "resources." Only the
visible objects are given resources. So this I think also applys to
accordian windows other than the default. Ordinarily, refreshing a
regular page with Flash audio players scattered about would fix it,
but with a Spry accordian it just reverts back to the default tab.
Hope this makes sense.
Can anyone suggest a workaround?

Hi,
what Spry version do you use? If you have Spry 1.4 we had a
bug for Accordion that was fixed on Spry1.5.
If your Spry version is 1.5 please give us an url to see your
problem.
Thanks,
Diana

Controlling visibility of Spry Accordian

Hi,
I have created 2 spry accordians for my site here :: www.octopusdesign.net/embedded.html and am having a problem with their presentation.
After the page has loaded the spry panels are laid out and then they collapse leaving one visible panel. The problem is that I don't want to see the accordian at all until it has been collapsed. I tried using CSS to set the visibility to hidden initially on creation and then to visible at the end of the onload handler. This is slightly better, but you still see the page become stretched (as the accordian is laid out invisibly) before the page resumes it's correct size and the accordian becomes visible.
Then I tried setting display = none in the CSS with display = block at the end of the on load handler. In this instance the accordians never become visible.
Any advice on how to manage this better would be greatly appreciated. I'm using Dreamweaver CS3.
Thanks for listening,
Chris

Hi,
Depending upon another context attribute condition get th ecolumn ref of the alv field which you want to hide and set the visibility property to none.
data : lt_columns type SALV_WD_T_COLUMN_REF.
Get the column ref
CALL METHOD lo_value->if_salv_wd_column_settings~get_columns
    RECEIVING
      value = lt_columns.
CALL METHOD lr_column->set_visible
        EXPORTING
          value = cl_wd_uielement=>e_visible-none.
Thanks,
Shailaja Ainala.

Lightbox 2 and Spry Accordian

Hello,
Does anyone know if there might be an incompatibility issue
with lightbox 2 and spry accordians with Explorer?
compare these 2 pages in explorer
http://www.pearceco.com/bowdoin_square.html
http://www.pearceco.com/bowdoin_square3.html
click on the one bedroom floorplan link (right hand side) in
each
In Explorer on a pc in the second page (the page with the
accordian) sometimes the page won’t even
open... What is most perplexing is that this all worked
before... go figure.
Please help,
elizabeth

>>>>Any thoughts as to why?
Not without seeing the code.
Can you post a link to the page showing the problem
behaviour?
Regards
John Waller

Spry Accordian Invalid XHTML

Hi:
I created a spry accordian from DW CS3. Insert/Spry/Spry Accordian, but when I run through the W3C validation site I get the following error report:
Line 182, Column 49:         Attribute "tabindex" exists, but can not be used for this element.
<div id="Accordion1" class="Accordion" tabindex="0">
✉
You have used the attribute named above in your document, but the       document type you are using does not support that attribute for this       element. This error is often caused by incorrect use of the "Strict"       document type with a document that uses frames (e.g. you must use       the "Transitional" document type to get the "target" attribute), or       by using vendor proprietary extensions such as "marginheight" (this       is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in       the document type you are using, as an undefined element will have no       supported attributes; in this case, see the element-undefined error       message for further information.
How to fix: check the spelling and case of the element and attribute,        (Remember XHTML is all lower-case) and/or        check that they are both allowed in the chosen document type, and/or       use CSS instead of this attribute. If you received this error when using the        <embed> element to incorporate flash media in a Web page, see the        FAQ item on valid flash.
Here's the code straight from DW. Any help much appreciated TIA!
<!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="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">

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

Your best bet regarding that particular "error" (tabindex exists but cannot be used for this element) is to remove the tabindex attribute and value from your markup.
Unless you have a good reason to have it there, it is basically nonfunctioning. There are probably other ways to set a tab order, but typically, accessibility indicates that you should set up your page (code) in the order that you would like it 'read' by screen readers. Then it will naturally tab from form element to form element in order.
Beth

Spry Accordian in navigation

Similar Messages

Maybe you are looking for