Is adding easing on the accordion panel possible?

Hello! I am using the accordion panel but I would like to control the speed that the menus drop down and up. Right now it is rather instantaneous. I've searched around and can't find anything on it. Any advice on how to do this?
Thank you!
Larry

At current stage we cannot control the speed directly from Muse , but you want apply some custom code to achieve this.
Thanks,
Sanjit

Similar Messages

How do I collapse all the accordion panels

The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@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 {
width: 174px;
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.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
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 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #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;

Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps.

Is the Accordion Panel Capable of Holding a Gallery (with multiple pages)?

I'm trying to create a website similar to this: http://www.christianschmidt.com/ using the Accordion Panel. Can the panel's content panel hold javascript? I've tried several types of javascript based galleries and nothing seems to work correctly..
the site I'm working on: www.anhstudio.com/sample
if you have any suggestions on what javascripts I should use/work, let me know - thanks.

I have spent a lot of time on this, mainly because the problems crops up every now and again. Unfortunately it goes above my ancient head and I have only managed to come up with a very partial solution. In the following, I have taken all of the links to JS files and moved them down to the bottom of the document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../SpryAssets/SpryAccordion.js"></script>
<script src="../js/jquery.ui.widget.js"></script>
<script src="../SpryAssets/SpryDOMUtils.js"></script>
<script src="../js/jquery.smoothDivScroll-1.1-min.js"></script>
<script>
var nav = new Spry.Widget.Accordion("nav", {defaultPanel: -1});
Spry.$$('.AccordionPanelTab').addEventListener('click',function(){
    Spry.$$(".AccordionPanelOpen").forEach(function() {
        $("div#makeMeScrollable").smoothDivScroll({
            autoScroll: "onstart",
            autoScrollDirection: "backandforth",
            autoScrollStep: 1,
            autoScrollInterval: 12,
            startAtElementId: "startAtMe",
            visibleHotSpots: "always"
</script>
If you click the first tab first, you will see it working. Alas, if you happen to click any other tab first, it will not work.
HELP ARNOUT KAZEMIER!!!
Apology for the outburst. Getting closer though.
Gramps

Adding dynamic content to accordion panels

Hello,
and thank you in advance for any help.
I need to make a new web page for my girlfriend. She's a
photographer which means she needs to update her page pretty often.
The usual small systems however were way too complicated for her.
After seeing Spry, I decided to use it, along with Relay
which gives an easy option for updating content. So here's my plan:
- I install Relay so she has sort of a back-end to update her
pictures.
- I have a php script which reads out the directories and
makes an xml file to use with spry.
However I find it very difficult to understand how I should
use this xml file. Additionally, she wants to have the accordion
panels, so I have to put the code (probably the same code with only
a different xml filename for each directory) into every panel.
Could anybody help me with that? Please note that I haven't
started anything yet and am right now trying stuff locally.
Thank you again.
Mete

Hello again,
I'll try to describe the case once again, this time more
clearly:
- I will install Relay onmy server to enable uploading
pictures. Relay stores the upload pictures in different directories
which are created by the user and the path to each directory is
known.
- A PHP-Script reads out the content of these directories
(names, paths etc) and gives a list as an XML-File.
What I want to do is:
Make an HTML-Page and use Spry Accordion Panels in it.
Let's say I have 5 panels. Each panel (in itself) shall use
the XML-file (one file per directory) to display the pictures. The
styling will be made by using the CSS.
My problem is:
I just can not figure out how to use the regions etc in Spry.
I have to admit that so easy it is to use, it 's also pretty
difficult to understand the logic behind it for non-skilled users
(especially for those who do not have Dreamweaver etc). I can't
find the answers to my questions like: Why do the datasets get the
prefix "dsXXXX"?
I only want to read the XML-File and display these pictures
in an Accordion Panel without floating, which means it has to
scroll left and right.
I hope this makes it easier to understand :)
Thank you once again!
Mete

Can someone explain the code for having the Accordion panels closed?

I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela

GPDMTR25 wrote:
I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela
Hi Angela,
You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
Hope this helps.
Ben

How can I use the accordion panel widget with a footer?

Hi,
My question is may be not clear. So I'm gonna be more specific. I'm using a menu for my website with the accordion panel widget. The menu is working fine and when I'm opening it, it pushs the items below on the pages.
My problem is with the footer of the page. Because, when the items below the widgets are pushed, they go below the footer and the footer is not pushed.
Is there any way to pushe the footer when I use the accordion widget? I don t want to overlap it.

I assume this is what you want to achieve in the footer....
Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

How can I use the tabbed panel with the accordion panel options of close all panels and over/not overlap the items below?

Ideas for features in Adobe Muse

I assume this is what you want to achieve in the footer....
Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

Adding widgets to the widgets panel, and including resources.

I use Google Checkout and various other items which would be nice to setup as widgets instead of dealing with the HTML snippet widget and fiddling with editing HTML and JavaScript manually and having it in the page as an invisible box. Does anyone know of a way of adding a widget to widget palette in iWeb? I'm not against coding a plugin in Xcode, if that's what it takes, but Xcode doesn't seem to have any templates or documentation on the subject. The iwdgt bundles in the app's resources directory give part of the story, but if someone has a simple solution, that would be excellent.
Second, we frequently have things like PDFs and resources that we'd like to make downloadable from our site, but I don't see a good way to include them in the published product (I can place them somewhere separately and link to them, of course). Any suggestion?

Send a feature request to Apple via via http://www.apple.com/feedback/iweb.html.
OT

Having trouble trying to link to an accordion panel on the same page

Hello all,
I've been following instructions on
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigation
to try to link to/open a specific panel in an accordion panel from a menu on the same page, but it's not working. Could somebody tell me what I'm doing wrong? My page-in-progress is:
http://fleap.com/YGRpage2011.html#
The menu on the right, under the word, "Details", is the one I'm trying to link to the accordion panel, and the panel itself is lower down the page.
thanks very much for any help you can give me!
Anna

1. Remove the constructor in the HEAD section of your document
var acc1 = new Spry.Widget.Accordion("SpryAccordion1", { useFixedPanelHeights: false });
2. Change the HTML markup to the following
<ul>
<li><a href="#" onclick="Accordion1.openPanel(0); return false;"> how <span class="title">You've Got Rhythm</span> works</a></li>
<li><a href="#" onclick="Accordion1.openPanel(1); return false;">sample pages</a></li>
<li><a href="#" onclick="Accordion1.openPanel(2); return false;">reviews</a></li>
<li><a href="#" onclick="Accordion1.openPanel(3); return false;">syllabus</a></li>
<li>copying license</li>
<li>about the authors</li>
<li>tips</li>
<li>cd tracks</li>
</ul>
Gramps

Accordion Panels not collapsing in Adobe AIR

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

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

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@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 {
border-left: solid 1px gray;
border-right: solid 1px gray;
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.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* 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;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* 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-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* 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: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* 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: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

How do I Hide open accordion panels, tooltips, etc. in Design view in Muse

I am adding tooltips and accordion panels in Muse. The problem is that, when I am editting the site in Design view, I cannot get the tooltips and panels to close... and so any other objects, text, etc is hidden by the open tooltip / accordion panel... I worked around this somewhat by creating another element in the accordion panel that contains no text, and so shrinks the whole accordion when that element is active, but this is cumberson, and I can find no comparable work-around for tooltips...

AppleScripts can be saved as run-only, which will keep a casual user from seeing the code, but there isn't a way to keep plain text from being seen. You should never place sensitive information in plain text in your script/application, or even use them with global variables, since those are also saved with the script.
The security shell utility can be used to get a password from the system keychain, for example:
getKeychainPass("Apple") -- example
on getKeychainPass(itemName)
return text 2 thru -2 of (do shell script "security 2>&1 >/dev/null find-generic-password -gl " & quoted form of itemName & " | awk '{print $2}'")
end getKeychainPass

Help tweaking Spry accordion panel code!

Hello all,
I'm currently working on an information portal for a client and am having trouble with creating code to open a specific accordion panel on another html page without messing up the code so that the accordion panels have adjustable heights based on content.
The website has an Interactive Map page, which has some tooltips that have links to the Nurseries page. The Nurseries page has accordion panels with nursery entries ordered by province; anchor links were added to nursery entries that are linked to the Map page. In theory, when a user clicks on a "Click here for information" link on the Map page, the Nurseries page will load and automatically open the exact panel where the entry is housed with the exact entry showing at the top of the browser window. So I tested it out and it works exactly as I want it to, HOWEVER, the adjustable height feature that I added to the accordion panels on the Nurseries page now no longer works (now there are scrollbars on the right if the height exceeds the default height), AND all the panels by default are open instead of closed!
Here is the pertinent code that I am using on the NURSERIES page:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></ script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></ script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
</script>
This is the code I added to one of the tooltips on the MAP page:
<a href="nurseries.html?panel=9#mangatarem" title="Go to native species nursery listing" target="_blank">
What do I need to do in order for this to work? I tried reordering the code to read { defaultPanel: params.panel ? params.panel:
0, useFixedPanelHeights: false } and even tried combining the two { useFixedPanelHeights: params.panel ? true: false } but nothing worked. Any suggestions?
Many thanks in advance for your assistance!!
Joy

Hi Joy,
Without going to a lot of trouble in writing an onload event, the following method is feasable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" />
<style>
.region {
    color: #090;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
</style>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="acc" class="Accordion" tabindex="0">
<span class="region">Luzon</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.1</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">Morong; Bataan</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Center for Biomolecular Science</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Dr. Lourdes J Cruz <br />
              [email protected]</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.2</div>
    <div class="AccordionPanelContent">Content 1.2</div>
</div>
<span class="region">Visayas</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.1</div>
    <div class="AccordionPanelContent">Content 2.1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.2</div>
    <div class="AccordionPanelContent">Content 2.2</div>
</div>
<span class="region">Mindanao</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bukidnon Province</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">San Vincente; Baungon; Bukidnon</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Kalangan San Vincente Farmer’s Association</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Mr. Nonito Antoque <br />
            0926 904 7336</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
      <hr width="565" align="center"/>
      <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Brgy. Imbayao; Malaybalay City; Bukidnon</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>DENR Community-Based Rainforestation Project</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Mr. Felix Mirasol (CENRO & PASU)<br />
              [email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Compostela Valley Province</div>
    <div class="AccordionPanelContent">
        <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Maragusan; Compostela Valley</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>Kasilak Development Foundation</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Joemil Montebon<br />[email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
</div>
<script>
    var acc = new Spry.Widget.Accordion("acc", { defaultPanel: params.panel ? params.panel: 0 });
</script>
</body>
</html>
Notes:
Apart from the 14 errors created by the table elements and their style rules, the above document is HTML5 validated.
The panels count include the <span>'s so that panel 0 is Luzon and panel 1 is the first accordion panel
Because the <span>'s are part of the accordion, they take on the accordion style rules so that you will have to tweak them.
I hope this helps.
Ben

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Is adding easing on the accordion panel possible?

Similar Messages

Maybe you are looking for