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.

Similar Messages

Problems with spry accordian widget in CS5

I am updating a client's website and am having problems with the spry accordian widget. I read that it has been replaced with jQuery in the latest version and am told I can modify my existing spry widgets but cannot add new ones. In trying to modify the existing widget I get error alerts. I guess adding a new accordian tab is not considered a modification of the existing widget. I only have CS5 version of DW. What to do? Thanks in advance for your help.

Hi Patricia,
you with your CS5 can continue to use the spry accordian widget BUT it's inopportune. I quote from different contributions of the forum: "Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” So I/we recommend you to switch to a jQuery library for your further requirements."
You may have a look here: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm, where you will find a wide range of different menus.
On the other hand - to become closer with your problem - you could send us the link to your website in question.
Hans-Günter

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 Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

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 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

Using anchors with Spry Accordian

I would like to use anchors in the Accordian tabs so when one
clicks on a link outside the widget that points to the anchor on
the tab, the tab opens the panel. Does anyone know if this can be
done and how to do it? I am not versed in javascript, so I can't
write the code myself.
Thanks

Hi,
Checkout this sample:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
It shows you how to set up a link so that it can open a
specific panel.
--== Kin ==--

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 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

My home page spry menu tab does not appear in when displayed in Internet Explorer 8.2.

My home page spry menu tab does no
t appear in Internet Explorer 8.2.
Can anyone help please?

This is what you have now, please delete the > (greater than) marks at the start of each line and reupload so that I can view the result
> <li><a class="MenuBarItemSubmenu" href="#">Home</a>
> <ul>
> <li><a href="#">Item 1.1</a></li>
> <li><a href="#">Item 1.2</a></li>
> <li><a href="#">Item 1.3</a></li>
> </ul>
> </li>
> <li><a href="#">Window Cleaning</a></li>
> <li><a href="#">Office Cleaning</a></li>
> <li><a href="#">Domestic Cleaning</a></li>
> <li><a href="#">Carpet Cleaning</a></li>
> <li><a href="#">Upholstery Cleaning</a></li>
> </ul>>

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....

Missing Spry Menu Tab on CS5 using an iMac (only 2 computers cannot see it)

I am using Dreamweaver CS5 on iMacs in my classroom. Two students are not able to see the blue Spry Menu Bar tab. Is there something that needs to be selected in order for them to see it? I thought maybe they missed a step so we followed our book and recreated the Menu Bar on another page. Once the menu bar is complete and you click off, the blue Spry Menu Tab is not available. Any suggestions would be greatly appreciated.

Hello,
even if there are only two students with these problems, you should follow Ken's hint. One of my most important arguments: "Spry doesn't work correctly on touch screens!" Please try it, you will have a nasty surprise!
And here I quote from different contributions of the forum:
"Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future. We/I recommend you switch to a jQuery library for your further requirements."
Examples
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://craigsworks.com/projects/simpletip/
http://calebjacob.com/tooltipster/
http://www.solutions4website.com/Extensions/nova_dropdown_menu.aspx
Tutorials:
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
http://try.jquery.com/
http://learn.jquery.com/
https://tutsplus.com/course/30-days-to-learn-jquery/
http://www.w3schools.com/jquery/
If you have a budget to work with, get PVII's Pop-Menu Magic2.
http://www.projectseven.com/products/menusystems/pmm2/
Hans-Günter

Spry Blue Tab Helper gone...

I am attempting to use the Spry Text Validator for a page on my site, but I cannot get the blue tab to appear to edit the properties. This is kind of interesting, because they work on my pages that were created in the root folder, but I'm having my issues with pages in other folders (ie, site_root/folder/webpage.php). The only other difference I've come across is that I have created my Server Behaviors first on the pages I'm having issues with, and with the pages that the Spry blue tabs appear, I created the Server Behaviors after adding Spry Validation. Also, I have confirmed the the Spry .js and .css are pointing to the correct folder and files. Any help would be appreciated!
Update:
So I have found the issue, but I don't know how to resolve it. When I create a Spry Validation Text Field, an object is not being created. For example, there is no:
<script type="text/javascript">

</script>
being created on my page. If I manually create it, the blue tab will appear. However, I have to do this for every Spry Validation object I create. Why is this? Is it something I'm doing?

Hi,
I often come across similar issues using DW. I do not believe it is a Spry related issue, but one of DW.
My solution to the text input validation field is to first create normal form fields and then convert them to Spry validation form fields. This works fine because the extra mark-up is automatically created.
I hope this helps.
Ben

Spry Accordian Tabs Question

Similar Messages

Maybe you are looking for