Accordion panels not operating

I am setting up a page with several spry tabs; each tab has
an accordion panel. On one tab, the accordion panel functions
properly. On the second one, the accordion panel appears open and
the panels don't slide closed. Any clues about where I might look
for the error in panel2? Thanks!

Without seeing your actualy page/markup (got url?), we can
only guess. Perhaps your accordion markup is malformed? The
accordion code expects a strict structure:
--== Kin ==--

Similar Messages

Anchor links to accordion panels not working properly across browsers

Hi everyone,
I need some help to figure out why my anchor links to specific accordion panels on another page are not working properly across browsers.
I have a Map page which has tooltips on mouseover on the site markers. 15 of the tooltips have "Click here for information" anchor links (although only 14 are currently linked) which, in theory, would take you to the Nurseries page where the specified accordion panel would be opened with the nursery entry appearing at the top of the new browser window.
Here are the links to the Map page and Nurseries page, respectively:
www.alegriadesignstudio.com/RFRI/map_v6.html
www.alegriadesignstudio.com/RFRI/nurseries_v6.html
I've tested the anchor links on IE, Firefox, Google Chrome, and Safari, and have received varying results. In most cases, the anchor links worked perfectly on two of the browsers, while on the other browsers, the correct accordion panel is opened but the nursery entry does not appear at the top of the new browser window. Anchor links using Safari and Google Chrome fared better (10 out of 14 links worked properly, and 8/14, respectively), whereas when using Firefox and IE, only 3 anchor links worked properly. The target audience for this website will be using IE and Firefox, so I would appreciate any help to figure out how to tweak the code so that the most, if not all, anchor links work properly on these two browsers in particular.
Here's an anchor link which worked perfectly in IE, GC, and Safari, but in FF, the entry did not appear at the top of the new browser window.
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green dot from the top of the map (Tooltip--Location: Mangatarem) and then click on "Click here for information."]
Here's a sample anchor link in which the entry did not appear at the top of the new browser window in any of the 4 browsers:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the bottom of the map and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet; North Cotabato) and then click on "Click here for information."]
Here's a sample anchor link in which the anchor link worked properly in GC and Safari, but the entry didn't appear at the top of the browser window in IE and FF:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island north and a bit west of "Mindanao" which is called "Bohol" and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then click on the first "Click here for information."]
Many thanks in advance for your assistance!
Joy

Hi everyone,
I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
Many thanks in advance.
Joy

Accordion panel not working correctly in IE6

Hi,
I created a page with an accordion panel set that worked fine
in FireFox. The panels start closed and then open when clicked
upon.
This works fine in IE 7 but when I open this page in IE6, the
panel tabs do not function properly. The top five do not have the
background color or any delineating lines - there is just the text
of the panel tab. When the tabs are clicked on, they will open but
the colors change oddly. Sometimes there is a small horizontal
section of no color at the bottom of the panel tab color. When the
cursor is moved around the page, the tabs can change
colors....sometimes. Other times a tab will lose color completely.
And yet, it works perfectly in Firefox. What could be causing
this problem. I was so happy that I had finally completed this page
since there was a lot of dynamic data to link to the page - and now
I feel like I am back at square one.
Please help!
Thanks

I atually figured it out - well I got it to work right but
I'm still not sure why it works. I had the accordion panel in a div
wrapper. The positioning was set to "relative". When I commented
out that line, it worked fine in IE6! I'm not sure why - but I'm
glad it did!

Accordion Panel not seen in browser. Before, yes.

Hi,
I've using the Accordion Pannel with several Tabs. It was working good on the browser. Now, after few weeks I started to work with some PHP. I am now working with a LOCAL server for trsting the PHP applications.
But I can not preview in the browser all the accordion panels I made. I saw only the plain text, images, flash, everything but not the Accordion Panels. On the contrary in the localhost server oln the top right of the browser says "READER", I click there and I can read the text content of the first tab only.
I changed the server from local to remote in order to upload my regular html pages with the accordion panels. I uploaded them and I don't see them too, even when I browse in the URL. What is happening here? The PHP is blocking something?
Here you have one of these pages:
http://www.magicperu.biz/paginascom/faq_sp.html
Below the titles should be the accordion panel with 8 tabs and text content in spanish. Can you see that? If not, what was wrong? In those html files I didn't put any PHP code. The PHP I am using only for the contact form and stuffs.
I use Mac OS 10.6.4, Dreamweaver CS5 with MAMP. Safari.
Thanks for your help.

Hi,
looking to the source code of your
http://www.magicperu.biz/paginascom/faq_sp.html
I can see your advices, indeed:
name="head">
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
but I miss the consistent continuation, here (German DW):
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bezeichnung 1</div>
    <div class="AccordionPanelContent">Inhalt 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bezeichnung 2</div>
    <div class="AccordionPanelContent">Inhalt 2</div>
</div>
</div>
and especially this:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
I suggest that you first try inserting Accordion Pannel into a very new *.html file to see what happens.
Hans-G.

Spry horizontal menu bar and accordion panels not working when published

Hi,
I'm a newbie to Dreamweaver and have been asked to design an intranet site. On the site, I added both Spry widgets for a horizontal menu bar and an accordion panel. Both of these widgets work in preview, however, neither work when I publish. I uploaded the Spry asset folder (with all the CSS and JS files) to the remote server, but still no luck. What am I missing?
Thanks.

Despite of what you have staed, my bet is on the fact that the SpryAssets folder and/or the included files are not being found by your page..
Open the site in FF, click on view Source and in the source code click the link to the JS file. If it can be found, it will show the content of the file and you will have the satisfaction of knowing that the page can find the file.
If it does not show the content, you need to correct that.
Good luck.
Ben

Accordion Panels not collapsing in Adobe AIR

Hi,
I'm trying to create an AIR application with HTML/CSS/AJAX (spry).
I've got my xml dataset set up and my accordion panel widget set up.
When I preview in Safari everything works fine, but when I preview in Adobe AIR the xml data shows up and the panels, but the accordion panels aren't working, clicking on the AccordionPanelTab doesn't do anything.
Any ideas on how to fix this, (if it is even possible)??

Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<link href="_Assets/css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_Assets/frameworks/AIRAliases.js"></script>
<script src="_Assets/spry/xpath.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryData.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
var dsSeasons = new Spry.Data.XMLDataSet("http://www.tvrage.com/feeds/episode_list.php?sid=21704", "Show/Episodelist/Season", {sortOnLoad:"@no", sortOrderOnLoad:"descending"});
var dsEpisodes = new Spry.Data.NestedXMLDataSet(dsSeasons, "episode", {sortOnLoad:"seasonnum", sortOrderOnLoad:"descending"});
dsSeasons.setColumnType("@no", "number");
function airdate(region, lookupFunc) {
var realdate = lookupFunc("dsEpisodes::airdate");
var array = realdate.split('-');
return array[2] + " - " + array[1] + " - " + array[0];
function seasonnr(region, lookupFunc) {
var nr = parseInt(lookupFunc("dsSeasons::@no"));
if (nr < 10) { return "0" + nr; }
else { return nr; }
</script>
<link href="_Assets/spry/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
    <h1>TV Show Title</h1>
    <div id="showInfo" spry:region="dsSeasons dsEpisodes" class="SpryHiddenRegion">
        <h2>Episode List</h2>
            <div id="eplist" class="Accordion">
                <div spry:repeat="dsSeasons" class="AccordionPanel">
                    <h3 class="AccordionPanelTab">Season {@no}</h3>
                    <div class="AccordionPanelContent">
                        <table spry:repeatchildren="dsEpisodes">
                            <tr class="{dsEpisodes::ds_EvenOddRow}">
                                <td><input name="seen" type="checkbox" value="1" /></td>
                                <td>{function::seasonnr}<span class="ex">x</span>{dsEpisodes::seasonnum}</td>
                                <td>{function::airdate}</td>
                                <td><a href="{dsEpisodes::link}" target="_blank">{dsEpisodes::title}</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var acc = new Spry.Widget.Accordion("eplist", { useFixedPanelHeights: false });
            </script>
        </div>
    </div>
</div>
</body>
</html>
Sorry, I don't have an online url for you, I'm still working locally.
In the browser everything works fine, only when I preview in Adobe AIR the panels stop working.
I hope you can figure it out and point me in the right direction.
Thanks

Spry accordion panel not lining up with top of viewport in FF3.5

I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul A

so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                  <div id="Accordion1" class="Accordion">
                    <div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
</div>

Toggle Accordion panel not working

I have a single panel that I am starting closed and when you
click on it, it opens. I would like to be able to click on it again
and have it close. I've looked at the messages here and tried the
solution but it is not working for me. In the code, I have:
<script type="text/javascript">

</script>
at the bottom of the page. I really don't understand why it
is not working.
Thanks.

A single panel accordion?
I suggest you try a Collapsible Panel Widget, which will do
exactly what you are looking to do.
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
And if I misread this and you have multiple panels and want
the same functionality, the Collapsible Panel Group was designed
for that.
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Hope this helps.
Don

Accordion panel not displaying right on published site

Okay if I publish the site with the panel open, it stays open all the time but the graphics are perfect. If I close the panel and publish, it acts normal: meaning it's only visible when you click the right word. However the graphic image is all messed up then?
Why the change?
This is driving me INSANE. I'm going to start driving my client INSANE hahaha. Any ideas?
Site: www.latinavega.com

I would have to say that the author of this document is
uninformed. In
general the entire page is off-kilter, but this paragraph is
particularly
egregious -
=========
The problem is that percentages and em's (which are basically
the same thing
in CSS) cascade very differently from one browser to the
other - this is
especially tricky with nested tables and can create huge
implementation and
display problems - getting these to work on all flavours of
Explorer and
Netscape requires a lot of experience, testing and patience.
An alternative
is to use several stylesheets and browser sniffing, but
either way
implementing resizable fonts is a hassle.
=========
It is true that one must understand the tools one is using
before they can
be used effectively. But in general, the use of percent, ems,
or font size
names are quite common on the web. When placed on pages with
valid and
complete doctypes they behave predictably from one browser to
the next....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Mlpol79" <[email protected]> wrote in
message
news:ea580j$4nv$[email protected]..
> Hey Chad Z cool website,
> Read This it might help
>
http://www.revelate.com.es/uk/papers/fixed_fonts.html

Lightbox nested in Accordion panel is not working.

I am attempting to nest a lightbox slideshow in an accordion panel with less than desired results. I can get the Lightbox to nest and I can arrange the buttons just fine .However, when I preview it my forward and back buttons appear in the upper left corner and they are all messed up. This is absolutly useless as it destroys the aesthetics. Any insights as to how to fix this (not work around, I can do that...) would be appreciated.
Here are some screens:
1) layout is fine. Note the advance arrows on left and right of layout.
2) Layout seems to be fine in the preview. Thumbnails look good...
3) The advance arrows are not where I placed them in the layout. They are overlapping in the upper left corner.

Well, it's not recreating what I did becauseI don't see any images in your example. Did you populate the gallery?
Anyhow:
I created an accordion panel.
The first top panel contains a price list with text only.
Using the "+" I made a second panel and placed a "slideshow lightbox" widget
I populated the widget with roughly 100 jpegs compressed to 50% and edited my arrow keys placing them on the left and right which
gave the results in the image above.
This is repeatable on my end.

Accordion panel spry not working...

Can someone please look at this site and see what I am doing wrong?
My accordion is not working on the "heaven" page, but does work on the "about" page. ???
This link is the problem page.
This link, with the same accordion (on the same site) works fine!
I am not sure if it is a file location problem or what.
My SpryAssets folder is inside the root folder.
BTW, it works fine on my local machine, just not when i upload it.
At a loss,
Thank you!
MG
Also posted on the spry forum (with no responses).

OK. I'll have a go.
Have you thought about comparing the top section of code in the two pages. i.e. in the <head>
Take a look at this bit in particular.
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="cbc.css" rel="stylesheet" type="text/css" />
</head>
Have you got your site management set up?
Also, checking your page in the validator shows a few stray closing tags. </p> in the good page and a </div> in the bad page. I'm not sure, but a missed matched <div> tag might cause difficulties.
Martin

One accordion tab panel not working properly

Hi,
Can you spot where my error is here, in years 4-5?
http://www.grad.umn.edu/gradwriting/IWP/
The first accordion panel is open; all other accordion panels
are shut at start . What am I missing? Thanks!

Your code is this
<script type="text/javascript">

</script>
but should be this
<script type="text/javascript">

</script>
Accordion3 and Accordion4 lines mixed up
Carl

Error "Connection Failed The server may not exist or is not operational..."

This is just FYI in case somebody else runs across this. On one user account, an error window would pop up every so often that said:
Connection Failed
The server may not exist or it is not operational at this time. Check the server name or IP address and try again.
It turns out that the problem was caused by Screen Saver. The error popped up whenever screen saver tried to launch. On the problem account I had the "Pictures" folder selected for the screen saver, and apparently there must be an alias in that folder pointing to something on a remote server, because as soon as I go to System Preferences and open the Screen Saver panel, I get the error.
It has been driving me crazy for months but finally I thought to look in Console, where I saw the error "afp_mount[5045] CFLog (0): CFMessagePort: bootstrap_register(): failed 1103 (0x44f), port = 0x2d03, name = 'com.apple.afp_mount.ServiceProvider'"
Searching for that error led me to the Macosxhints forum at http://forums.macosxhints.com/archive/index.php/t-53209.html where a user had posted the same problem. Changing to a different screen saver or a different folder for pictures resolved the issue.
PowerMac G5 Mac OS X (10.4.6)
PowerMac G5 Mac OS X (10.4.6)

Welcome to discussions leffjay. Good one. Cheers.

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

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

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

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
    background-image:url(../Images/WaterLeaf_Exp.png);
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:scroll;
    background-color:#222222;
.panelContent {
    color: #dcd2d2;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 15px;
    margin-top: 20px;
.tabContent {
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    padding: 15px;
#big {
    /*background-image*/
    background-repeat:no-repeat;
    border: none;
    top: 0px;
    margin-left: 23.5%;
    position: static;
    height: 800px;
    width: 955px;
#table {
    width: 700px;
    height: 290px;
    /*margin-top: 1%;
    margin-left: 125px;*/
    border: none;
    position: relative;
    z-index: 2;
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
    border-left: solid 1px gray;
    border-right: solid 1px black;
    border-bottom: solid 1px gray;
    overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
    margin: 0px;
    padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
    background-color: #FFF;
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
    /*background-color: #cccccc;*/
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
    color: #93C;
    filter:alpha(opacity= 50);
    opacity: 0.5;
    -moz-opacity:0.5;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #cccccc;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab:hover {
    background-color: #FFF;
    filter:alpha(opacity= 20);
    opacity: 0.2;
    -moz-opacity:0.2;
.AccorrdionPanelOpen:hover {
    filter:alpha(opacity= 90);
    opacity: 0.9;
    -moz-opacity:0.9;
    color:#F00
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #390;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;

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

Using text links to open accordion panel

How do I use text links (from the page's main menu) to
programatically open a particular panel.
here is the page:
http://debrankin.com/tee/SITEDESIGN/
for example: I want to click on "Resumes and Cover Letters"
in the left hand menu to open the first accordion panel (by the
same name). I have this set this page so that all panels are closed
initially.
i know i'm missing something because this obviously does not
work: i've looked for documentation and this issue is inadequately
addressed!

twinflame wrote:
> i know i'm missing something because this obviously does
not work: i've looked
> for documentation and this issue is inadequately
addressed!
Not really. The problem is that you have attempted to create
a
JavaScript object called accordion1 before the accordion HTML
is even
loaded into the browser. Moreover, the script that
initializes the
accordion is already in your HTML where it should be (after
the
accordion), but it uses Accordion1, not accordion1
(JavaScript is
case-sensitive.
Remove this after your menu.
> <script type="text/javascript">
> var accordion1 = new
Spry.Widget.Accordion("Accordion1");
> </script>
Change the links in the menu to Accordion1.openPanel(0),
etc., and it
should work.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

Accordion panels not operating

Similar Messages

Maybe you are looking for