Spry Accordian panel - bottom tab always open

I have several customers that are now wanting the very bottom
Tab to always be open INSTEAD of the top tab. The customers are not
seeing the rest of the tabs and going on about there business with
out seeing the new information added each time. What do I have to
do to make the very bottom tab open when the page is viewed?

Thank you very much...
I guess if I would have actually looked for it I might have
found it, but I couldnt find a similar thing in spry menu so I
didnt even bother. I do appreciate your help and now I have the
location of the document so its all good!
Salute!
~ That fixed 2 nagging problems on different sites for me,
awesome!

Similar Messages

Mobile site accordian closes but bottom tab is open when site reopens

the mobile site accordian closes but when reopened, the bottom tab is open.
because previously i had the "can overlap" checked but it was permanently pushing down items below,
i was advised to uncheck that feature. this solved that problem but i wonder if it is making the bottom tab come open each time the site is reopened.

i will double check it now but i am pretty sure i have had it closed when i uploaded.
will get back to you shortly.
thanks
Pat Shapiro
Flying Colors of Naples, Inc.
ADVERTISING
• Graphic Design • Corporate Image
• Photography • Website Design
630 Murex Drive
Naples, FL 34102
Phone 239.434.0685
fax 239.434.6233
www.flyingcolorsofnaples.com
[email protected]

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Spry sliding panels with tab

Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?

Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image.

How can you get your homage address to open when you open new tabs? My homepage is Google, but my new tabs always open with Yahoo.

On my old computer, all my tabs always opened to what my homepage was set to: iGoogle. Now with my new computer, my homepage is set, but all new tabs open with Yahoo! I've tried looking at tab setting but don't see a place to set it. Help!

The behavior that you have is not the default Firefox behavior, which always opens a blank tab. You will have an add-on that is causing this. Check for any Yahoo related add-ons to see if they have this option. The freeze net assistant add-on is another one that opens Yahoo in a new tab.
There are add-ons that allow you to specify what should appear on a new tab, but these may conflict with the add-on that is opening Yahoo.
* NewTabURL - https://addons.mozilla.org/firefox/addon/newtaburl
* New Tab Homepage - https://addons.mozilla.org/firefox/addon/new-tab-homepage
Another way of opening the home page in a new tab is to middle click on the home button in the navigation toolbar.

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

Spry accordian panel not closing

I have created a page using both the spry tabbed panels and
accordian panels. The accordian panels are in the content sections
of the tabbed ares. I want the accordian panels to be closed
initially, and whenever you click on the tab of the panel it will
open if it is closed, and close if it is open. I have modified the
code (as described in the Adobe Resource section) at the bottom of
the div. I got it to work on a simpler page (without the tabbed
panels) but I can't get it to close when click on if open. It will
close if another tab is clicked, but that isn't what I want. I'm
thinking it has something to do with the fact that it is in the
tabbed panels spry, or I am overlooking something. I am not very
verse in javascript, so I can't troubleshoot it. Can someone look
at the code and suggest a solution? The site is
http://www.capitolphotointeractive.com/test

Hi amilesslady,
You'll need to replace the version of the SpryAccordion.js
file on your site with a more recent one. You can get the the one
from Spry 1.6.1 here:
http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
Or you can download the Dreamweaver 1.6.1 updater and use it
to update the Spry related files in Dreamweaver and your sites.
http://download.macromedia.com/pub/labs/spry/1/spry_p1-6-1_updater_022508.mxp
--== Kin ==--.

Spry Accordian Panel not showing?? What am I missing?

http://www.neighbor.org/plan_giving2.htm
Take a look at the last accordian panel, it is not showing fully, but you can still click on it depending in what browser. How do I adjust it to show fully - The Planned Giving Council Tab.
Thanks,
TD

I'm not seeing the problem on any of my browsers, but I see you have built the page in Frames, which are an old technology, and a little hard to troubleshoot from here.
It could be that the height of your Accordion is falling deeper than the Browser Viewport, then being hidden by the bottom of the Frame. Try shortening up the accordion; there could be a little space taken out between the accordion tabs.
Beth

New tab always opens babylon search site - how to change that

http://search.babylon.com/?babsrc=NT_bb
this link always appears when i open a new tab.
1. how do i stop this?
2. how do i choose my own default address for new tabs?

I had this problem too. Babylon is a Firefox add-on you have to remove. Go to tools and select add-ons. Scroll through add-ons until you find the Babylon add-on and select it which should highlight an uninstall button. Uninstall the add-on. You will have to restart your computer for it to take effect. New tabs should open to an untitled tab. Just hit your home button for the new tab.

A new tab always opens Yahoo versus wait for an address

I downloaded an MP4 player and it did something to Mozilla such that every time I open a new tab it opens yahoo versus wait for a site address to find. How do I get rid of this nuisance?
== Operating system ==
Windows XP2002 SP 3

Hello Jack C. Anderson,
this problem could probably be caused by a Firefox extension.
To make sure that no extension is causing the problems,
start Firefox in Safe Mode by following the instructions in the [[Safe Mode]] article.
Kind regards,
Tobbi
Firefox Support Volunteer

Spry Accordian panel content height for more than 1 accordian in site

Hi,
I have added a couple of accordians to my website on different pages.
When I adjust the panel content height for 1 it automatically changes it for all of them on my site causing scroll bars to be visible - which I am trying to avoid.
I'm new to Spry coding and am not sure what to change.
Thank you for your help

This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
In the CSS stylesheet, do this:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: auto;
#normalheight .AccordionPanelContent {
     height: 100px;
#doubleheight .AccordionPanelContent {
     height: 200px;
Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
Beth

When clicking CTRL+Link my new tab opens in the background window, instead of the foreground window I'm using. Is there a way to make this work the way it used to, where the new tab always opens in whatever window I was currently using?

I use a web based software for work. I go to a web page listing all employees as links (Window A). When I click an employee link a new window opens (Window B). Window B contains links, i.e. Add Client, Change Address, Change Phone Number, Change Name, Upload Photo, etc... When I hold CTRL and left click the links in Window B, the new tab opens in Window A. I don't understand why this has changed, as I've been using this method to open new tabs in my current window in both of the previous versions of Firefox.

That didn't work, but thank you very much for the offer of help. I had already tried that option.
To give you an example of what I'm speaking, I found this page that recreates the scenario.
1. Goto [http://www.kirupa.com/developer/mx/centered_popup.htm http://www.kirupa.com/developer/mx/centered_popup.htm]
2. Click the GO in the center of the box on their page (This creates a pop-up window with links to other programming pages)
3. CTRL+left click any of those links. The page opens in the background/original window, not the pop up window where you are currently working. And, with your solution takes me back to that window and the new tab.

Spry Accordian Panel not Working in IE6

I'm designing on a Mac in Dreamweaver CS3 and the Spry widget
Accordian is not expanding right when testing in IE6. Does anyone
know if there is a fix for this?
Missy

The samples work fine In IE6.
So if u can give us a piece of code & constructor or a
online url so we could investigate this behavior.

Few tabs always opening up whenever I restart Firefox

Before I updated to Firefox 13.0.1, I used version 3.6. I remember that I closed with few tabs open(4 websites). Later I installed latest version 13.0.1.
The problem now is whenever I open firefox after my system startup, the firefox window is opening up those 4 websites.
Even when I close the firefox, it is not asking for "save and exit" unlike earlier old version.
Please help me how to get rid of this ?

Thanks for posting back with a solution.
I hope you found that after reading some of the linked articles mentioned in the posts above.
Your actions will have set a home page, (google, or the default home page, which itself has a Google searchbar) and you will have set Firefox to open with the homepage instead of the last set of tabs and windows.

My tabs always open to a blank page. I want every new tab to open to my home page. Note: I DO NOT want Firefox to open with multiple tabs on my home page; I only want my home page to open whenever a click a new tab. How do I do this? Thanks.

Already provided in the question.

See:
*https://addons.mozilla.org/en-US/firefox/addon/777
*https://addons.mozilla.org/en-US/firefox/addon/2221
'''Other issues needing your attention'''
The information submitted with your question indicates that you have out of date plugins with known security and stability issues that should be updated. To see the plugins submitted with your question, click "More system details..." to the right of your original question post. You can also see your plugins from the Firefox menu, Tools > Add-ons > Plugins.
*Next Generation Java Plug-in 1.6.0_23 for Mozilla browsers
**'''''Security update version 1.6.0_24 released 2011-02-10'''''
#'''Check your plugin versions''': http://www.mozilla.com/en-US/plugincheck/
#*'''Note: plugin check page does not have information on all plugin versions'''
#'''Update the [[Java]] plugin''' to the latest version.
#*Download site: http://www.oracle.com/technetwork/java/javase/downloads/index.html (Java Platform: Download JRE)
#**'''''Be sure to un-check the Yahoo Toolbar during installation if you do not want it installed.'''''
#*Also see "Manual Update" in this article to update from the Java Control Panel in Windows Control Panel: http://support.mozilla.com/en-US/kb/Using+the+Java+plugin+with+Firefox#Updates
#* Removing old versions (if needed): http://www.java.com/en/download/faq/remove_olderversions.xml
#* Remove multiple Java Console extensions (if needed): http://kb.mozillazine.org
#*Java Test: http://www.java.com/en/download/help/testvm.xml

Spry Accordian panel - bottom tab always open

Similar Messages

Maybe you are looking for