Spry Accordion doing wierd things

I have a page with 4 accordions on it. To keep things in line, they are in 4 cells of a 2 row table. (I know ... ick!) They are working as designed (including 2 not being expanded on load) except for the erratic behavior of the bottom two. They expand (widthwise) and contract with no reason. I've carefully compared them with the top two (behaving very nicely, thank you) and can find no code difference. What have I missed? The link is http://shrhabitat.org/HFHSHR_staff.php. Thank you.
don Carlos

You aren't setting any widths on your accordions or the <table> ... If you don't specify a width on your tables they will shrink wrap whatever is inside them ... since one of your <td> in your tables is set to 50%, it will always resize whenever the width of your table changes. If you don't specify a width on your accordion, then it defaults to trying to expand to fill up the width of its parent, in this case a table cell, which triggers the table layout code to figure out if it should resize ... blah blah :-) ... Try setting the widths of your table to 100% and see if that fixes things for you ... that will stop the tables from growing/shrinking as content inside it changes.
--== Kin ==--

Similar Messages

Spry: Accordion does not close properly

Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one   I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
Chuck

Hey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!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>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
    <div id="NavBar">
      <div id="SmallerNavBar">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
            <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
              <p><em><strong>Friday Night :</br>
              <br>     <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
              <p><em><strong>Saturday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
              <p><em><strong>Sunday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
              <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 5</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 6</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p>2007</p>
              <p>2008</p>
            </div>
          </div>
</div>
        <div id="Cover">
          <p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
          <br>Cover Designed By:</br>
          <br>Andrea Pagenkopf</br>
          <br>Rolling Rockets 4-H</p>
        </div>
      </div>
    </div>
</div>
<div id="MainContentBox">
    <div id="BoxForText">
      <p align="center">Welcome to the new</p>
      <p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
      <p align="center">Webpage</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>News:</u></em></strong></p>
      <p align="center"><em>Buttons for 2009 are on sale now! </em></p>
      <p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>Updates:</u></em></strong></p>
      <p align="left"><em>7/10/2009</em> - New Homepage</p>
      <p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
    </div>
</div>
<div id="BottomBox"></div>

</div>
</div>
<script type="text/javascript">

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

Audio doing Wierd things!!

Just wondered if anyone has experienced this little querk?
All was well, but my captivate has just started to do this today,
and it's somewhat annoying and causing me unneccessary re-work.
Problem is this:
I am recording narration onto a captivate project which is
derived from a converted powerpoint presentation (2003, backward
converted to 2003 to inport into Captivate 3).
When I set my sound levels and record for the first time on a
slide it plays back fine, no hissing or quality issues. However,
now imagaine I edit the recording and need to insert a newly
recorded sentence into this prior recording. BINGO... and here is
the issue, when I do this the recording plays back really noisey at
this newly inserted piece and the quality is awfull, even though
all the equiptment and my voice hasn't changed. I have even tried
recalibrating the input before doing an insert and it has made no
difference.
Curiously, if i then add a blank slide to the project and
record the new sentences to insert in there and then Import that
audio into the preferred slide, it plays back fine. I have no idea
why it is doing this and wondered if anyone else has experienced
this and if I can do something to fix this issue. It makes eding
the audio, hard work and as it was ok before, I am unsure why this
has changed now??
Any advice PLEASE.
Thanks!

> Curiously, if i then add a blank slide to the project
and record the new
> sentences to insert in there and then Import that audio
into the preferred
> slide, it plays back fine. I have no idea why it is
doing this and
> wondered if
> anyone else has experienced this and if I can do
something to fix this
> issue.
> It makes eding the audio, hard work and as it was ok
before, I am unsure
> why
> this has changed now??
I experienced similar the other day - I think somehow the
original sound can
be compressed a second time under certain circumstances,
causing the bad
sound quality. I didn't manage to pin down the exact steps
that caused my
sound problem, but it was something similar to what you
describe. I think
you'll have to stick with your workaround for now.
Steve
http://twitter.com/Stevehoward999
Adobe Community Expert: eLearning, Mobile and Devices
European eLearning Summit - EeLS
Adobe-sponsored eLearning conference.
http://www.elearningsummit.eu

MY NANO IS DOING WIERD THINGS WITH THE ARTWORK!!

this is what happened :
i went to go play a song so i clicked on it. the artwork was not the regular album artwork. it was weird pink and yellew pixels. i went back to main menu .
and ALL of my cover flow was gone . so i clicked on songs again and it froze for about a minute then returned to normal. but i still can't get the regular album artwork. it keeps doing this ( for teh past week)should i restore my ipod or get a new one ?

i would restore your ipod to refresh everything that will be synced... and make sure you have all up to date patches for your ipod and itunes....

Please help! My ipod nano 1GB is doing wierd things!!!

I just got it less than a week ago so I am really new at this. My ipod was fine all day until this afternoon when I was listening to a song, then I noticed that it had stopped playing music so I looked at the screen and it showed the ipod skipping songs on its own. My ipod has a full battery and isn't on suffle. Every time I go to my list of songs and select a song the ipod starts going through the songs and will not stop until I press pause. If I press play again it then goes back to skipping songs until it has finished the list, then it goes back to the main menu. Please help me! I don't know what my ipod nano is doing!!!
Ipod Nano Windows XP

Try resetting your iPod...
Resetting iPod
If that doesn't work, make sure your iPod's software is up to date...
iTunes
iPod Updater
Updating iPod's Software
If you updated and the problem persists, try a restore...
Restore the iPod
This may also be helpful...
Troubleshooting Songs That Skip On iPod
btabz

My iPod touch 4G keeps doing wierd thing!!

My iPod touch keeps doin these stupid things! When I swip to search iPod and I swip back to c my apps the key board stays there! And when ever I'm in a app my iPod screen will go black for 5 seconds and go back to the home screen and freeze! Can somone help me please!

it could be that you have water damage.... if not just try restarting (press the home button and the sleep button at the same time until you see the apple logo

Colour problem with Spry Accordion

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

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

Spry Accordion default panel in Master Detail Page

Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
    <div class="AccordionPanelContent">
        <table width="385" border="0" class="AccordionPanel" id="content1">
          <?php do { ?>
            <tr>
            <td >
               <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
               </td>
            </tr>
            <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
        </table>
    </div>
</div>
<script type="text/javascript">

</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!

PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben

Spry Accordion Jerky/Jumping movement Issues in IE

I am having a difficult time trying to debug the accordion in IE. You can see the accordion here in IE I am having two issues.
1. When at the top of the site and clicking on a tab to open it jumps down the page as if it were an anchor point, and I find this very annoying.
2. The movement below the tab clicked is jumping around and this also is incredibly annoying to me, its more subtle than the above issue but it still bothers me. I am having this issue in GC as well.
I have searched quite a few forums and have not found a solution for this but this must be a fairly common issue? I am not that familaur with spry yet this is my first real project using it so my knowledge is very limited to this point. This dose work perfect in FF.
Thanks in advance,

I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
Date: Tue, 27 Oct 2009 15:23:40 -0600
From: [email protected]
To: [email protected]
Subject: Spry Accordion Jerky/Jumping movement Issues in IE
Can you provide me with files where I can reproduce your issue with
out any other scripts on the site? This gives me a better debugging
area. If you do not feel comfy with posting it online. You can e-mail
it to mailto:[email protected]
>

IE renders spry accordion glitchy and unusable (FF works perfectly)

Hi everyone, I'm making my Dad a website and I've adapted a spry accordion into a large table that expands the row over mouseover. The problem is that internet explorer (only tested in 7 so far) renders it almost unusable, however it looks fine in good old firefox which I was developing it on. Since I've spent so much time trying to make this damn thing I'm hoping somebody could come up with a solution to make it behave as it does in FF?!
Here's the link http://www.photronics.co.uk/spry.htm
Thanks!
Nick

Your problem stems from
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabClick(e, panel); }, false);
But you already knew that. You just wanted to test us
To get the panel to open on a mouseover event have a look here http://forums.adobe.com/message/2980659#2980659
Gramps

Spry Accordion jerky and not content filling correctly after refresh

Hello.
I have a page I'm trying to make a Spry Accordion work smoothly.
I've tried options such as, fixedHeight fps from 30 - 500, timer from 100ms to 1000ms, disabling Keyboard navigation, all working somewhat, BUT....
When opening and closing the panels sometimes they open to "fill content" and others no.
For example in the LEgal panel there is only one line. I would like that panel open to a height equal to the line height. Some other pabnels open partially then fully, and back again.
The animation can be pretty jerky.
I've duplicated the page and while playing with a JQUERY UI accordion it is pretty smooth.
IS there anything I can do to get the Adobe Spry to work?
http://corporate.fr/ce/clientsSpry.html
Ooops never mind. I will post this anyway as maybe other noobs will resolve the problem if they do as I did.
I stuck this
In the container after the div not realising the default <script> is put at the very end of the mark up just before the </body>
Two things learned, one when the Adobe document says the script has to go in after the mark up, that means not just after the div with the Spry but all the way at the end,
and two: if you modify the Spry options, note the var acc1 and the string "Acc1" have to be replaced with your Spry ID, in both places.

Hello to all,
I have spent HOURS trying to figure this out....
I know the above code is messy, but it does correctly do the accordions via innerHTML. I have a dropdown on my page and when the user changes the input there, I call "doSpryData" and it is supposed to 1) reload XMLDataSet and 2) redraw the Accordion (I would like to have different data displayed on the same page depending on what user selects). For some reason, it will not redraw the accordion and show the data after it has been done once.
I am really desperate so any ideas would be much appreciated!
Cheers,

Desperate help needed in understanding SPRY accordion CSS

hello everybody
like many out there im stumbling through some home/self tuition on DW. I've recently checked out the spry accordion. It all went well up to the part where I wanted to improve the outlook of the accordion. I luckily found some templates on the adobe site with an accordion with the general idea as to how I would like an accordion to look, or at least a platform for future ideas. (Design #2 at: http://www.adobe.com/devnet/dreamweaver/?view=samples )
I've had a look through the code and have found great difficulty understanding a few of the div classes that are contained within it, i.e. what they are attributed to etc.
Here is the HTML and the Spry CSS docs that I downloaded from the link above:
HTML code (my issues are highlighted in red)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OurCompany.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="#" >Contact Us</a> | <a href="#" >Site Map</a></div>
<div class="toplogo"><a href="#"><img src="images/transparent.gif" width="365" height="90" border="0" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="#" >This is definitely navigation item 1</a></li>
<li><a href="#" >Item 2</a></li>
<li><a href="#" >Item 3</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Lorem Ipsum dolor sit amet</h1>
<img class="imageright" src="images/content_photo_1.jpg" border="0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sedpharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id <a href="#">velitvitae ligula</a> volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet. </p>
<img class="imageleft" src="images/content_photo_2.jpg" border="0" /><p>Consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>
<p>Nulla libero. Vivamus pharetra pos uere sapien. Nam consectetuer. Sed aliq uam, <a href="#">nunc eget euismod ullamcorper</a>, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">
TELLUS PROIN EU ERAT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
UMA NON TEMPLUS NUNC
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.</p>
<p>Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris.</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">
CONSECTETUER ADIPICING ELIT
</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class="imageright" src="images/accordion_photo.jpg" border="0" />
<p>Cras tempor. Morbi egestas. Tempus, nunc arcu mollis enim, eu aliqu mam erat nullanon nibh consectetuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p>
<p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2009 Our Company. All rights reserved.</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I'n terms of the <div class="accordion_340_tab"> i'm really not sure what these mean. I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean. There is no reference to them in any of the code/ CSS sheets i downloaded.
Plus, i'm not quite sure what the two <div style="clear:both;"></div> are clearing.
I know these will be really basic questions and I apologise for having to trouble you but any help would be really really appreciated
This is the spryCSS that came with the link to accompany the HTML file...
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
width: 255px;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
color: #394867;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
/* 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 {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
/* 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 {
background-image: url(../images/accordion_255_tab_over.gif);
/* 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: #000000;
/* 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: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif);
Thank you to anybody again who may be able to assist me with this. I'm very new to DW (and some may say not the brightest) so any low level explanations will be really appreciated.
Kind regards
Andrea x

Heya, I hope my response will help.
First off, I'd like to say that you are correct in being unable to find the " <div class="accordion_340_tab"> " anywhere in the project. I went through and checked all the code and couldn't find a reference anywhere. Also, I downloaded the project from your link, deleted the <div class="accordion_340_tab"> as well as the </div> right after the TELLUS PROIN EU ERAT" (as the opening div and closing div work together and must be added or deleted together) and it had absolutely no impact from what I could see in internet explorer 8 and firefox.
Therefore, I believe, that it was originally intended to do something or in fact did something but they took that out and then forgot to take out the div. Even within the internal .js file I couldn't find a reference. Maybe they forgot to upload a third stylesheet. Either way, it appears to work just fine without it.
"I'm not quite sure what the two <div style="clear:both;"></div> are clearing."
In regards to this, this div style tag is a less frequently used tag that can divide content. Do you know what the HR tag in html is? If not, try putting a <hr> tag (just like that, by itself) in your web page somewhere. HR stands for Horizontal Rule- it makes a horizontal line across the page. This div style clear both tag is basically an invisible HR that helps separate different divs or content or whatever else is on the page. Think of it as an invisible page break.
"I know the label title is situated within them (at least i think they are!!) but i dont quite understand what they are doing or mean."
You should check out some CSS tutorials for the basics, but in a nutshell I'll go ahead and explain what I believe you are having trouble with.
Let's put it this way:
HTML is the core of your web page. It is the content and substance.
CSS is the style of your web page. It is the color, alignment, and format of your page.
The "div" tag by itself is simply <div>. However, you MUST close a div tag somewhere on the page with a </div> A div tag by itself, however, will do absolutely nothing. How do you get it to do something? By making a CSS rule, the two most common of which are known as a "div id" and "div class".
The differences between div id and div class are pretty small- div id is mainly used for a div tag that will only be used once on the web page. Div classes are used for something that will be repeated, in this case, the accordion tabs.
Therefore, when you see something like <div id="content"> text blah blah blah </div>, then you know that the "text blah blah blah" is your content, and that content is being modified to the specifications of the id "content". Where is this "content" div? This is what you as the designer make (or there will already be one in a template) and can usually be found in an external STYLESHEET, which holds all of your css rules, and is then linked to the main web page's html document (where your content is) with a link tag in the header of the html, usually right after the title and before the end of the <header> tag. You will find <link href="example.css" rel="stylesheet" type="text/css" /> but with a different name in the part i put as "example.css"
Within that css document you have different things you can do. Let's say I want to make one div id and one div class. I want to name the ID "example1" and the class "example2". It would look something like this (note that you must ALWAYS start an ID with # and a class with a period)
#example1 {
width: 450px;
margin:auto;
color: #fff;
.example2 {
width: 900px;
margin: 10px;
color: #000;
I hope this helped.
-Matt

Curious about the Spry Accordion widget?

Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:
Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)
Curious about Spry, but have never used Spry widget features in Dreamweaver
You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver
Familiar with CSS styling and how it works
We are offering a small incentive to those willing to help us complete this study.
If you meet these requirements and would like to participate, please contact me at [email protected]
In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.
Thanks!

I added an accordion widget and it works on one site page while same code won't work on another page.
It works here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now/K-5th-Grades.aspx
Does not work here: http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx
Yet both pages have identical code (with absolute links to the CSS and JS files).
Can anyone shed some light on a solution?

Spry Accordion Widget Init Closed, Without Snap?

(This is a topic discussed in
another
thread, but I didn't want to hijack the thread with my own
question, so I started a new one...)
I want to start my Accordion widget in a closed state. I
figured out the trick of setting the default panel to '-1' and
turning fixed heights by altering the code in the footer of the
page to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: -1,
useFixedPanelHeights: false});
When you do this, however, the page loads with the first
accordion panel open and visible for a split second until the page
is loaded, at which point the widget snaps the panel shut. This is
very ugly and undesirable, especially given that this accordion is
on a page element common to every page on the site.
I've tried setting an initial class that is hidden, however
the Spry Accordion widget is written in such a way that it
preserves whatever classes you have rather than replacing them.
Does anyone know a way to load the page with the accordion
panels shut without this initial flash of the first panel snapping
shut?
Thanks,
Steve

Hey Al,
Nice plug for your own application! Here is another one,
since I am one of your happy customers.
I used the Spry widgets in the new DW CS3 and spent a couple
of days trying to tweak things to get them to work the way I
wanted. After getting input from my brother (his site that I am
working on) he really wanted some more style than what I was coming
up with using the basic DW widget. I smacked my dollar on the
barrel head and tried out PVII Accordion instead.
I can't tell you how fast and easy it was to insert and
customize this plugin. Not to mention they had some nice little
themed styles, one of which (the cobalt blue) was a real close
match to the color scheme I originally was using! (PS - any chance
of getting more theme styles down the road for this plugin or
matching styles for the other ones???)
Changing the open or closed state of the panels - it was so
simple!!! I simply went into the modify option and chose the number
that corresponded to my different panels in the menu list. My buddy
used an expression about DW CS3 that fits nicely with using tools
like PVII Accordion Magic. You can use a screwdriver with some
precision and a lot of hand strength to build what you want but it
will take you alot of time...or you can plugin a power drill and be
done with it!
To see it in action on my current work in progress go to:
http://www.dvdflashbacks.com/williamsburghealth/index.php
As for sstringer's original question - how to do this in DW's
Spry widget...
I think you are onto the right track with the -1 setting. If
I am not mistaken though, Spry uses 0 for the first panel, so I
think you would need to use an option like {defaultTab: 1} to open
the 2nd panel and so on.
PS - Just so everyone knows - I am not a sales person for
PVII - just a very satisfied customer!

Slight movement of spry accordion container when animating

I have a spry accordion inside a container and when I click on each tab, the bottom of the container jerks up and back down slightly as the accordion panel animates the movement. This appears to happen in all browsers so I'm wondering if someone know a fix. I suspect it has to do with a height setting somewhere.
Here is my page:
http://www.esc-online.com/mars/tour_sp_ac.html
There are four css files associated with this:
http://www.esc-online.com/mars/css/reset.css
http://www.esc-online.com/mars/css/mars2.css
http://www.esc-online.com/mars/SpryAssets/SpryAccordion.css
http://www.esc-online.com/mars/SpryAssets/SprySlidingPanels.css
Thank you.
Simon

I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
Date: Tue, 27 Oct 2009 15:23:40 -0600
From: [email protected]
To: [email protected]
Subject: Spry Accordion Jerky/Jumping movement Issues in IE
Can you provide me with files where I can reproduce your issue with
out any other scripts on the site? This gives me a better debugging
area. If you do not feel comfy with posting it online. You can e-mail
it to mailto:[email protected]
>

Spry Accordion doing wierd things

Similar Messages

Maybe you are looking for