Spry Accordion with custom scrollbar

I'm trying to find a Spry Accordion with a custom scrollbar.
There are other accordion scripts out there but I am most
comfortable working with the Spry script. I cant seem to find any
of these with a custom scrollbar. Can someone here help?

Mr. Andersson wrote:
> I'm trying to find a Spry Accordion with a custom
scrollbar. There are other
> accordion scripts out there but I am most comfortable
working with the Spry
> script. I cant seem to find any of these with a custom
scrollbar. Can someone
> here help?
Spry has no custom scroll bars. Currently Spry (as of 1.6.1)
doesn't have drag and drop which would be required for a custom
scroll bar. Best you might be able to do would be to try to style
the browser provided scroll bars, but that's not valid CSS, and I
know that Firefox doesn't show the styled scrollbars (IE does).
Take a look at this page in IE:
http://www.iconico.com/CSSScrollbar/
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Similar Messages

Spry accordion with nested accordions

I'm building an FAQ list with topics and sub topics, using a
containing Spry accordion with multiple children, though just the
one extra level deep. The nested accordions won't expand the full
list. Instead, the div height remains fixed, and I get a scroll
bar. Any ideas what part of the javascript to tweak to open up this
functionality?
Here's the page:
http://www.pixmission.net/dev/tex/faqs.htm
thanks

alancymru escribió:
> I'm building an FAQ list with topics and sub topics,
using a containing Spry
> accordion with multiple children, though just the one
extra level deep. The
> nested accordions won't expand the full list. Instead,
the div height remains
> fixed, and I get a scroll bar. Any ideas what part of
the javascript to tweak
> to open up this functionality?
>
> Here's the page:
>
http://www.pixmission.net/dev/tex/faqs.htm
>
> thanks
>
Sure! It has to be done in two parts. First part from your
SpryAccordion.css file and the second it is adding a new
property to the
Accordion object when its initialized.
First part:
Select .AccordionPanelContent class
Delete Height property
Change the value of overflow from auto to hidden;
Second part:
In the constructor function at the bottom of your faqs.htm
file, amend
this code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var Accordion9 = new Spry.Widget.Accordion("Accordion9");
to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{useFixedPanelHeights:false});
var Accordion9 = new Spry.Widget.Accordion("Accordion9",
{useFixedPanelHeights:false});
Hope this helps.

Spry accordion with php mysql as data

Hello
I`m trying to create a spry accordion where the Labels are pulled from a mysql database table and the Content of that label is pulled from data in the same database. I tried adding first the spry accordion and then created 1 recordset for the labels and a second recordset for the content , then I added a repeat region for the labels DIV and inside this div I added a repeat region for the content.
Unfortunatly when viewed in the browsers the accordion doesn`t work.
Can anyone look at the code and tell me where is the mistake.
Thanks
<?php require_once('Connections/log.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);
$mhour_log_mon = "0";
if (isset($row_log_year['yy'])) {
$mhour_log_mon = $row_log_year['yy'];
mysql_select_db($database_log, $log);
$query_log_mon = sprintf("SELECT DISTINCT DATE_FORMAT(`23849`.acoff, '%%M') AS mon , DATE_FORMAT(`23849`.acoff, '%%m') AS m , sum(`23849`.ablock) as toth FROM `23849` WHERE YEAR(`23849`.acoff) = %s GROUP BY m ORDER BY m ", GetSQLValueString($mhour_log_mon, "int"));
$log_mon = mysql_query($query_log_mon, $log) or die(mysql_error());
$row_log_mon = mysql_fetch_assoc($log_mon);
$totalRows_log_mon = mysql_num_rows($log_mon);
?>
<!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>testing ajax php mysql</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">
    <?php do { ?>
      <div class="AccordionPanelTab"><?php echo $row_log_year['yy']; ?></div>
      <?php } while ($row_log_year = mysql_fetch_assoc($log_year)); ?>
<div class="AccordionPanelContent">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
    <?php do { ?>
      <tr>
        <td><?php echo $row_log_mon['mon']; ?></td>
        <td><?php echo $row_log_mon['toth']; ?></td>
      </tr>
      <?php } while ($row_log_mon = mysql_fetch_assoc($log_mon)); ?>
</table>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
<?php
mysql_free_result($log_year);
mysql_free_result($log_mon);
?>

You only have 1 "AccordianPanel" which contains a list of "AccordianPanelTab" elements, then a list of "AccordianPanelContent" elements.
You need to have a list of "AccordianPanel" elements, each containing a pair or "AccordianPanelTab" and "AccordianPanelContent" elements.
HTH,
Randy

Spry Accordion with Image Icons

I've created a Spry Accordion here:
http://www.holidaycardsunlimited.com/tips-advice/business-use/Business-Holiday-Cards.html
The client would like to have images (arrows or plus/minus) when the accordion expands or collapses.
Any ideas how to implement this?
Thanks in advance!

finally this css markup worked very fine for me
@charset "UTF-8";
.Accordion {
border: none;
outline:none;
overflow: hidden;
-moz-outline: none;
height:700px;
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab{
-moz-user-select: none;
-khtml-user-select: none;
background-color: #003266;
border-top: solid 1px white;
padding-top: 6px;
padding-bottom:6px;
padding-left: 24px; /* this created space for the images on the left*/
margin: 0px;
color: white;
font-weight: bold;
cursor: pointer;
background-image: url(../wm2010/img/gif/plus.gif);
background-repeat:no-repeat;
background-position: 0px;
.AccordionPanelContent{
background-color: #f6f6f6;
overflow: auto;
margin: 0px;
padding: 0px;
height:500px;
.AccordionPanelTab a{
color: black;
text-decoration: none;
// this is most important for IE
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: orange;
background-image: url(../wm2010/img/gif/minus.gif);
background-repeat:no-repeat;
background-position: 0px;
// this is the firefox guarantee
.AccordionPanelOpen .AccordionPanelTab{
color: orange;
background-image: url(../wm2010/img/gif/minus.gif);
background-repeat:no-repeat;
background-position: 0px;
.AccordionPanelTabHover {
color: orange;
background-image: url(../wm2010/img/gif/arrow.gif);
background-repeat:no-repeat;
background-position: 0px;

Spry Accordion with iFrames

I have a Spry Accordion which I'm using on the same page as an iFrame setup. I want to link the AccordionPanelTab to an iFrame link.
In order to get the iFrame to work I need to link like this:
<a href="iframepage.php" onclick="return changeIframeSrc('iframe', this.href);" target="iframe">
This works for links within AccordionPanelContent but not if I link the AccordionPanelTab.
I can get the AccordionPanelTab to link by
<a href="iframepage.php" onclick="window.location=this.href;return false;">
but not within the iFrame. Is there a way of combining these two to make them work or another way of making the AccordionPanelTab link?
Many thanks.

Have a look at the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<p>Open by Panel Index:
<a href="#" onclick="Accordion1.openPanel(0); return false;">0</a> |
<a href="#" onclick="Accordion1.openPanel(1); return false;">1</a> |
<a href="#" onclick="Accordion1.openPanel(2); return false;">2</a> |
<a href="#" onclick="Accordion1.openPanel(3); return false;">3</a>
</p>
<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 class="AccordionPanel">
    <div class="AccordionPanelTab">Label 3</div>
    <div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 4</div>
    <div class="AccordionPanelContent">Content 4</div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Copy and paste into a test document making sure that the links are correct. Test in your favourite browser.

IE / Spry Bug with custom error handler

Ok, as I was looking through SpryData.js I noticed these
wonderful lines:
Spry.Utils.loadURL.callback = function(req)
if (!req || req.xhRequest.readyState != 4)
return;
if (req.successCallback && (req.xhRequest.status ==
200 || req.xhRequest.status == 0))
req.successCallback(req);
else if (req.errorCallback)
req.errorCallback(req);
In particular the "errorCallback()" method interested me as I
wanted to introduce my own error handler. As I went about testing
this I came up with a quick try of:
var url = "/cfcs/mycfc.cfc?method=IsValidPath&path=" +
encodeURIComponent(sl.value + sd.value);
var optionsObj = new Object();
optionsObj.errorCallback = ShowError;
Spry.Utils.loadURL("GET", url, false, ValidateForm,
optionsObj);
And this works great in FF, but not IE. When I cause an error
to occur from ColdFusion I pass a status code of "500". In FF the
error code causes my "ShowError" function to fire, but not in IE. I
tracked it to this bit of code in SpryData.js:
Spry.Utils.loadURL = function(method, url, async, callback,
opts)
var req = new Spry.Utils.loadURL.Request();
req.method = method;
req.url = url;
req.async = async;
req.successCallback = callback;
Spry.Utils.setOptions(req, opts);
try
req.xhRequest = Spry.Utils.createXMLHttpRequest();
if (!req.xhRequest)
return null;
if (req.async)
req.xhRequest.onreadystatechange = function() {
Spry.Utils.loadURL.callback(req); };
req.xhRequest.open(req.method, req.url, req.async,
req.username, req.password);
if (req.headers)
for (var name in req.headers)
req.xhRequest.setRequestHeader(name, req.headers[name]);
req.xhRequest.send(req.postData);
if (!req.async)
Spry.Utils.loadURL.callback(req);
catch(e) { req = null; Spry.Debug.reportError("Exception
caught while loading " + url + ": " + e.message); }
return req;
Apparently running (req.xhRequest.send(req.postData);) in IE
will throw an error if the requested page throws an error status
code. This causes the try/catch in the Spry function to catch the
IE error and never allows my own error handler to run. Hopefully a
fix for this will be in the works because I really like the idea of
being able to use my own error handler.
--------Edited after initial post.--------
Ok, I figured out another item of interest. My requests
earlier were set to "async = false". If I set "async = true" then
it does work. I realized that because I was using sychronous mode
and IE was throwing the error, it was preventing the call to the
"Spry.Utils.loadURL.callback" method from occuring, while asynch
mode uses the onreadystatechange to call the function and thus
causes my own error handler to function. I am still interested to
know if there is a bug here somewhere and if it is just IE or Spry
or both. Looking forward to reading any posts.

Hi WraithBudde,
Thanks for all the details. In my opinion this is indeed a
bug in Spry for the synchronous case. I'll file a bug and fix it.
> You know you love me.
Heh, yeah, I love anybody who takes the time to report bugs
... especially when they've narrowed it down to the exact set of
lines in the source.
Once again ... THANKS!
--== Kin ==--

Spry accordion with effect appear/fade

Hi,
I'm looking for a solution with the effect appear/fade which I've putten on an image.
http://www.home-maastricht.nl/signage.html
When I open the tab the content image is bright and the tab is dark (this is ok).
The image from the tab must lighten up when I close the content tab.
The content tab can be close by clicking on the tab image and also by clicking on the content image.
Can you follow me?
And the most important, can you help me?
Thanks al lot !!
Regards,
Carla

Sorry, it was the Appear/Slide Effect

Accordion with spry data on IE8

Hi,
I have an accordion with spry data and everything works fine on IE8 and FF, but on IE8 when i click on a accordion tab it doesnt focus on that open panel. It takes me at the very top of where my accordion begins. I notice the same thing happens to the accordion with spry data site. It's a problem for me because my page has a long accordion and our users have small laptop screens. Does anyone know how this can be fixed in IE8?
Sorry i dont have a sample link or code, because it's on our company intranet. but i used the exact same method on the spry accordion with data page.
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
thanks!

Good. I am sure you can figure it out.
http://labs.adobe.com/technologies/spry/articles/pager/index.html
Let us know.
Donald Booth
Adobe Spry Team

How to make no panels on Spry accordion open by default?

I have a Spry Accordion with several panels. I want the default behavior for none of the panels to be opened until one is clicked. Currently the default behavior is for the first panel to be automatically expanded when the page is first visited. How do I correct this?

It's here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Under the sub heading "starting with all panels closed".
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Martin

SPRY Accordion Linking

I want to link certain text from a homepage to a second page
that contains a SPRY Accordion with three panels. But I want to
link to the second panel open, even though this is not the default
open panel if you load that page independantly. Is there a way of
telling the widget to open a specific panel through the link code
on the homepage? I am trying to avoid the visitor having to click
the panel for the selected topic on the homepage.

We have that feature built into our widgets, which are much
different than
spry:
http://www.projectseven.com/products/tools/accordion/tweaks/params/
If you don't have a development budget for add-ons, you can
look through the
spry docs:
http://labs.adobe.com/technologies/spry/docs.html
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"RGracia" <[email protected]> wrote in
message
news:fn55pk$htn$[email protected]..
>I want to link certain text from a homepage to a second
page that contains
>a
> SPRY Accordion with three panels. But I want to link to
the second panel
> open,
> even though this is not the default open panel if you
load that page
> independantly. Is there a way of telling the widget to
open a specific
> panel
> through the link code on the homepage? I am trying to
avoid the visitor
> having
> to click the panel for the selected topic on the
homepage.
>

Sorting Spry Accordion panels?- Repost

I posted this question on 5/20 but did not get any replies,
so I am reposting in hopes that someone might have an answer.
Can Spry accordion panels be dynamically sorted the same way
that regular Spry tables can? I created a Spry Accordion with a
book title on each panel. When you click on a panel, a table
appears (dynamically generated from an XML database using a Perl
script) showing author name, publisher, date of publication, etc.
I'd like users to be able to alphabetize the book titles in case
they're not already in alphabetical order. I'd also like to add a
link on (or near) the panels to sort them by date of publication,
even though the date field is not visible when the panels are
closed.
Thanks!
- cpmorgan

I couldn't tell from your post if you were generating the
markup for your Accordion using regions and data sets. If you are,
then you are probably doing something similar to:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
In which case, you can cause the panels to sort by simply
sorting the data set:
<a href="#" onclick="dsEmployees.sort('firstname'); return
false;">Sort by FirstName</a>
<a href="#" onclick="dsEmployees.sort('lastname'); return
false;">Sort by Last Name</a>
--== Kin ==--

Inserting a Spry Accordion on top of a background image?

I created an 800 x 600 pixel graphic image in Adobe Photoshop CS4 to be used as an overall background image for a webpage. I also created a few navigation links from the image Layers using the Slice Select Tool, then optimized and saved the image as an html file using the Save for Web & Devices command in Photoshop. Next, I opened the html file in Dreamweaver CS4.
Is it possible to insert a Spry Accordion with a clear (transparent) background anywhere on top of that background image in Dreamweaver CS4 so that I can see the background image behind the text content of the Spry Accordion? I use Windows Vista.

Hi,
Yes, as is shown by the following code:
<!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 style="background: url(images/detail/cd1.jpg) no-repeat center;"> //use your own location and file
<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>

Spry Accordion Menu - Content Height

Hey everyone,
I have a (hopefully simple) problem. I have a spry accordion with 3 tabs. Two of them have the same number of lines in them, but the "what" tab only has 2 lines so there's a lot of white space underneath it. I've tried changing
this.useFixedPanelHeights to false in the spry java script... and it does resize the content area properly, but the open and close on mouseover gets really messed up. Things don't open when they should, and close randomly. It makes it impossible to navigate. I've tried several other things as well, but nothing seems to fix the problem
The website:
http://jmb2-arch.com
Thanks in advance for any help!
-Cameron

You might try playing with the height specification as stated in the Spry CSS:
.AccordionPanelTab { -moz-user-select: none; -khtml-user-select: none; height: 76px; border: 2px solid #027dc3; width: 76px; color: #027dc3;
Setting a height is usually not necessary, unless there is a specific design reason (as there is here, with the main tabs and the sub tab area apparently intended to be identically sized).
Chris

How do I make my Spry Accordion menu scroll *with* my webpage?

Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
HTML of same div class:
<div class="contentright">
                            <div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?

Here is my HTML Coding
<html>
    <head>
        <title>BetsyMarvin.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <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="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
                <span class="toplogo"></span>
                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
            </div>
            <div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="theme_02_design.html">Home Page</a></li>
                    <li><a href="blog_design.html">Blog</a></li>
                    <li><a href="lessons_design.html">Lessons</a></li>
                </ul>
                <div class="content">
                    <div class="contentleft">
                        <h1>Welcome to my Website</h1>
                        <img class="imageright" src="images/faith reason.jpg" border="0" />
                        <p>text</p>
                    </div>
                    <div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
                                    <div class="accordion_340_tab">CONTACT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                      <p> <a href "mailto:[email protected]"> Email</a></p>
                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">ABOUT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <p>text</p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">PASSIONS</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />
                                             <p>text</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">© 2013 Betsymarvin.com | All rights reserved.</div>
            </div>
        </div>
<script type="text/javascript">

        </script>
    </body>
CSS Style Sheet
body {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #545454;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a          { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover    { color: black; }
.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
    width: 980px;height: 145px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
.bannernav {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
    color: white;
    text-decoration: none;
.bannernav a:visited {
    color: white;
.bannernav a:hover {
    color: #ECBB7B;
.toplogo {
    position: absolute;
    z-index: 100;
    padding-right: 0px;
    float: right; margin-left: 675px;
    padding-top: 10px;
.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 10px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;
    z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #CCA72F;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
.leftnavigation a:visited{
    color: #5C4C17;
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
    width: 400px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;
.imageleft {
    margin-right: 10px;
    float: left;
/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #cfcfcf;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    color: #666666;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
    overflow: hidden;
    width: 255px;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    color: #CCA72F;
    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);
.AccordionPanelContent {
    overflow: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
    background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
    background-color: #000000;
.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;
    useFixedPanelHeights = null;
.AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);

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 with custom scrollbar

Similar Messages

Maybe you are looking for