Accordion tabs

Hai Adobe users,
I am using accordion container.Normally in accordion using selectedindex=0 then first tab willbe open...but i want initially,all accordion tab willbe open.. How is it possible..plz guide me...
Thanks & Regards,
Sivamurugan.A

It is only possible to open one tab initially. What do you mean is a component like the WindowShade of flexlib.
Link: http://flexlib.googlecode.com/svn/trunk/examples/WindowShade_Sample.swf
You have to use this component or to develop a custom component.

Similar Messages

Link to specific accordion tab from other page

Hi all, were working on a site that has recipes page.
there are few recipes and they are all within an accordion widget.
when you click on the title ie: Apple pie the tab opens and shows the info.
My question is : Is it possible to link to that specific accordion tab on the recipes page?
For example: on the apple page there is a link to the apple pie recipe (which is inside an accordion)
is that possible?
yd.

i meant.
if you have a page. and on that page there is an accordion with multiple tab (or panel or whatever they are called)
i would need to make link on another page that link straight to a specific opened tab in the accordion. like an anchor link on another page, but
have the accordion panel open instead.
understand
sorry for the lousy english.
yd.

Accordion tabs w/panel sub-nav - default open issues

I have a spry accordion in a left sidebar, and I'm using it as navigation for a slideshow for a website I'm working on. Each of my 5 accordion tabs has a different category of slideshow, with each panel having multiple sub-navigation links that each link to a different slideshow which appears in the main part of the page (to the right of the sidebar). Say it's something like this:
VENUES (tab)
(start panel)
Bayside Restaurant (link)
Historic Ballroom (link)
Western Ranch (link)
(end panel)
ACTIVITIES (tab)
(start panel)
Surfing (link)
Dancing (link)
Horse back riding (link)
(end panel)
The sub-navigation to each slideshow is activated by simply clicking on the text, which I linked with the "point to file" link tool in the properties menu.
Ideally, I'd like to work with one template in Dreamweaver for all pages/slideshows I'm creating, but I'm running into a problem. I know how to change the default panel in the .js so that a different one appears open when a user first accesses the page, but I can't figure out how to get the default panel to change when the user clicks on a different panel and attempts to use the subnavigation. The subnavigation works just fine (it takes the user to the correct slideshow), but then the panel snaps shut instead of remaining open on the one the user selected.
(So, to further explain with the example above, say the user wanted to look at all the links in the "Venues" tab, but the default is to have the "Activities" tab open on arrival. The "Venues" tab opens just fine on the click, but as soon as the user clicks on, say "Bayside Restaurant," the correct slideshow appears to the right, but then the "Venues" tab snaps shut and the "Activities" tab and its sub-navigation appears open again. The user then has to click on the "Venues" tab again if s/he wants to see the other options and view a different slideshow, rather than simply being able to click on the next link.)
I tried making multiple templates, with different default panels open as a solution, but that's not working either. . .for some reason it keeps defaulting back.
Does this make sense? Are there any solutions to this problem? Any help would be much appreciated.
Thanks!
Rebekka

I think I found your problem. It lies in the Javascript:
<script language="JavaScript" type="text/javascript">
var indexAccordion = new Spry.Widget.Accordion("indexAccordion");
var acc1 = new Spry.Widget.Accordion("indexAccordion", { useFixedPanelHeights: false });
</script>
You have essentially duplicated the code in order to accomodate the useFixedPanelHeights. Consolidate it into single one, and remove the duplicate:
<script language="JavaScript" type="text/javascript"> var acc1 = new Spry.Widget.Accordion("indexAccordion", { useFixedPanelHeights: false }); </script>
IE might be having trouble understanding the double instances of the script and is ignoring the latter one. Just keep the latter one and it might fix it.
Also, thanks for the tip, but I use Chrome's Developer Tools... it just didn't cross my mind since I've been busy =)

How to Disable Accordion Tab?

HI. My first visit here...
Is anyone knows how to disable all accordion tabs and be able
to open each next from inside previous.
I know there are some nice samples on how to programatically
open panels and tabs, but on the same time each of panels or tabs
can be open by simply clicking on it. I need to restrict user from
opening tab, unless info is entered inside previous tab content...
Any advice is appreciated.

This question has been asked before. Once again, you can NOT do this using pure java. This could be done in Windows using JNI and a keyboard hook or interfacing with the screensaver API perhaps.

Access Objects In Unselected Accordion Tab

im trying to gain access to text fields in tabs of a accordion that arnt currently selected by the user so that i can save/load them. is there a way to maybe set it so these objects are always accessible?

You should have access to the text fields on another accordion tab as long as they have ids, even though they are not selected. Tab selection should not be an issue.

Radio buttons inside Accordion tab?

So I upgraded to 1.6.1 and fixed my IE issues, but it broke
my radio buttons. On my page (
Here) I've
got radio buttons nested inside the accordion tabs. In the previous
version (1.4) everything worked fine, but after the upgrade they
don't stay checked when you click on them. Any ideas?
Thanks,
Rory

There is limited documentation on this, but you might want to use the table select phase listener.
You can see this in action in the following sample app: http://blogs.sun.com/roller/page/divas?entry=table_component_sample_project
You can read a bit about it here:
http://blogs.sun.com/roller/page/winston?entry=single_selectable_row_table_component

Drag and drop accordion tabs

Is it possible to drag and drop accordion tabs, so that I can
rearrange its children?

Hi,
Do you get any error message/code?
Based on your description, I would like to suggest you try the following to check the issue:
1. Run Internet Explorer Performance Troubleshooter.
The Internet Explorer Performance Troubleshooter is an automated tool which will check for any performance issues which are common with the Internet Explorer on the computer and provides the details on how to fix them. Follow these steps and run the troubleshooter.
a. Press “Windows Logo” + “W” keys from the keyboard.
b. Type “Troubleshooting” in the search bar and press “Enter”.
c. In the “Troubleshooting” window, click on “View All” on the left pane.
d. Click on “Internet Explorer Performance”.
e. Click on “Advanced” and then click on “Run as Administrator”.
f. Click “Next” and follow the on-screen instructions to complete the troubleshooting process.
2. Run IE with no add-ons. Click Start -> All Programs -> Accessories -> System Tools -> Internet Explorer (with no add-ons).
3. Reset Internet Explorer settings.
http://support.microsoft.com/kb/923737
Please understand that reset Internet Explorer to its default configuration. This step will also disable any add-ons, plug-ins, or toolbars that are installed.
4. Try to reinstall the IE 11 for a test.
How to reinstall or repair Internet Explorer in Windows 7, Windows Vista, and Windows XP
http://support.microsoft.com/kb/318378/en-us
If the issue still occurs, you may boot the computer in safe mode and check if that helps.
Advanced startup options (including safe mode):
http://windows.microsoft.com/en-US/windows7/Advanced-startup-options-including-safe-mode
Regards,
Blair Deng
We
are trying to better understand customer views on social support experience, so your participation in this
interview project would be greatly appreciated if you have time.
Thanks for helping make community forums a great place.

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

Accordion tabs need to stay open

I'm using an accordion widget for my navigation area at my
wife's site, paxbaby.com. I would like to set the javascript so
that instead of defaulting to all-panels-closed on each loaded
page, it rather keeps open the panel that was open on the previous
page. For instance, if I open panel 3 and click link B, then when I
get to page B, I would like panel 3 to still be open so I can
quickly navigate to page A or C without having to open up the panel
again. I know even less about javascript than I do html, so could
someone help?
Thanks!!

You have to add a little piece of code into each page to make
this happen.
At the bottom of each page you should have a constructor that
creates the accordion. It looks like this.
<script type="text/javascript">

</script>
The default for Accordion is to open the top most tab first
but you can tell it here that you want a different tab to start
with by adding in the argument for default panel.
like this:
var Accordion1 = new
Spry.Widget.Accordion("Accordion1",{defaultPanel:0});
0 is the first tab so the above line will not change
anything.
var Accordion1 = new
Spry.Widget.Accordion("Accordion1",{defaultPanel:1});
This will make it default to the second tab
var Accordion1 = new
Spry.Widget.Accordion("Accordion1",{defaultPanel:2});
This will make it default to the third tab... and so on.
So you have to go to Page B and change this:
<script type="text/javascript">

</script>
To be this: (assuming page B is the second tab)
<script type="text/javascript">

</script>
You can check out all the options you can set here
http://labs.adobe.com/technologies/spry/articles/data_api/index.html
You will see "Accordion" in the side there. Click it and you
will see all the available options.

Accordion/tab combination problem in IE

I am attempting to use spry tabs inside spry accordion in
Dreamweaver. In any mozilla - based browser it works great, IE
won't hide the tabs when you select another accordion panel.
check out the link to see the problem:
http://www.kellywalsh.org/Untitled-1.html
works great in any browser except IE - any ideas?

Hi cyganski,
I've tested this scenario (almost all of it) by inserting an accordion on a blank page and by default works. Then I added a basic slideshow (actually two of them, see Ipsum 7 and Ipsum 8) and it seems to be working fine. You can see it here.
Let me know if this method provides the result you need to achieve. Investigating the code and errors on IE8 and I couldn't find any reason why the pannels won't expand...
Regards,
Cristian

Accordion Tabs Closed on Page Load

How would I fix this page so all the accordions are closed on page load? I don't want the first tab to be open when a viewer opens the page.
Link is http://thedenovo.worldsecuresystems.com/solutions.html

If you use jQuery UI Accordion Widget, set Active to false.
http://api.jqueryui.com/accordion/
Nancy O.

Accordion Tab without Submenu

Hello,
my Problem:
I need a menu with and without submenu.
Exapmle: (just a example)
Button "Home" without submenu, but "company" there are 2 submenus: "about" and "where to buy"
Now i make a new accordion menu and the first ("Home") button have to without submenu, but how?
When i delete at the one panel <div class="AccordionPanelContent"> and link the text in <div class="AccordionPanelTab2"> to an other site, the link is not working and the other open submenu is not closing.
Here a example which is not working:
<div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab2"><a href="main.html" target="main">Home</a></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Page 1</div>
          <div class="AccordionPanelContent"><a href="menu.html" target="main">Content 1</a></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Page 2</div>
          <div class="AccordionPanelContent">
          Content 2<br />
          Content 2.1
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab2"><a href="main.html" target="main">Page 3</a></div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Page 4</div>
          <div class="AccordionPanelContent">Content 4</div>
        </div>
      </div>
I want that when i click on the "Home" button the link site will open and the open submenu(s) get closed. an the same when i klick on "Page 3"
The link "Page 3" works perfectly.
The link in this example is not interest, just a sample.
I hope someone crack it.

You are right.
If i add one of those the panels don´t close.
When i click on a "normal" panel (with submenu) it add up, when i click it again it will close.
But not when i click for example at this (panel without submenu):
<div class="AccordionPanelTab"><a href="main.html" onclick="window.main.location = this.href; AccordionPanel.showPanel( -1 );
">News</a></div>
I think the answer is in the JS Script, so here it is:
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
    this.element = this.getElement(element);
    this.defaultPanel = 0;
    this.hoverClass = "AccordionPanelTabHover";
    this.openClass = "AccordionPanelOpen";
    this.closedClass = "AccordionPanelClosed";
    this.focusedClass = "AccordionFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.currentPanel = null;
    this.animator = null;
    this.hasFocus = null;
    this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
    this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
    this.useFixedPanelHeights = false;
    this.fixedPanelHeight = 0;
    Spry.Widget.Accordion.setOptions(this, opts, true);
    this.attachBehaviors();
Spry.Widget.Accordion.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
    if (panel)
        this.addClassName(this.getPanelTab(panel), this.hoverClass);
    return false;
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
    if (panel)
        this.removeClassName(this.getPanelTab(panel), this.hoverClass);
    return false;
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
    var panelA = this.currentPanel;
    var panelB;
    if (typeof elementOrIndex == "number")
        panelB = this.getPanels()[elementOrIndex];
    else
        panelB = this.getElement(elementOrIndex);
    if (!panelB || panelA == panelB)
        return null;
    var contentA = panelA ? this.getPanelContent(panelA) : null;
    var contentB = this.getPanelContent(panelB);
    if (!contentB)
        return null;
    if (this.useFixedPanelHeights && !this.fixedPanelHeight)
        this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
    if (this.enableAnimation)
        if (this.animator)
            this.animator.stop();
        this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
        this.animator.start();
    else
        if(contentA)
            contentA.style.display = "none";
            contentA.style.height = "0px";
        contentB.style.display = "block";
        contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
    if(panelA)
        this.removeClassName(panelA, this.openClass);
        this.addClassName(panelA, this.closedClass);
    this.removeClassName(panelB, this.closedClass);
    this.addClassName(panelB, this.openClass);
    this.currentPanel = panelB;
    return panelB;
Spry.Widget.Accordion.prototype.closePanel = function()
    // The accordion can only ever have one panel open at any
    // give time, so this method only closes the current panel.
    // If the accordion is in fixed panel heights mode, this
    // method does nothing.
    if (!this.useFixedPanelHeights && this.currentPanel)
        var panel = this.currentPanel;
        var content = this.getPanelContent(panel);
        if (content)
            if (this.enableAnimation)
                if (this.animator)
                    this.animator.stop();
                this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
                this.animator.start();
            else
                content.style.display = "none";
                content.style.height = "0px";
        this.removeClassName(panel, this.openClass);
        this.addClassName(panel, this.closedClass);
        this.currentPanel = null;
Spry.Widget.Accordion.prototype.openNextPanel = function()
    return this.openPanel(this.getCurrentPanelIndex() + 1);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
    return this.openPanel(this.getCurrentPanelIndex() - 1);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
    return this.openPanel(0);
Spry.Widget.Accordion.prototype.openLastPanel = function()
    var panels = this.getPanels();
    return this.openPanel(panels[panels.length - 1]);
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
Spry.Widget.Accordion.prototype.onFocus = function(e)
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
    return false;
Spry.Widget.Accordion.prototype.onBlur = function(e)
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
    return false;
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
        return true;
    var panels = this.getPanels();
    if (!panels || panels.length < 1)
        return false;
    var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
    var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
    while (nextPanel)
        if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
            break;
        nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
    if (nextPanel && currentPanel != nextPanel)
        this.openPanel(nextPanel);
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
    if (!panel)
        return;
    var tab = this.getPanelTab(panel);
    if (tab)
        var self = this;
        Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent("on" + eventType, handler);
    catch (e) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
    var content = this.getPanelContent(panel);
    if (isDefault)
        this.currentPanel = panel;
        this.removeClassName(panel, this.closedClass);
        this.addClassName(panel, this.openClass);
        // Attempt to set up the height of the default panel. We don't want to
        // do any dynamic panel height calculations here because our accordion
        // or one of its parent containers may be display:none.
        if (content)
            if (this.useFixedPanelHeights)
                // We are in fixed panel height mode and the user passed in
                // a panel height for us to use.
                if (this.fixedPanelHeight)
                    content.style.height = this.fixedPanelHeight + "px";
            else
                // We are in variable panel height mode, but since we can't
                // calculate the panel height here, we just set the height to
                // auto so that it expands to show all of its content.
                content.style.height = "auto";
    else
        this.removeClassName(panel, this.openClass);
        this.addClassName(panel, this.closedClass);
        if (content)
            content.style.height = "0px";
            content.style.display = "none";
    this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
    var panels = this.getPanels();
    for (var i = 0; i < panels.length; i++)
        this.initPanel(panels[i], i == this.defaultPanel);
    // Advanced keyboard navigation requires the tabindex attribute
    // on the top-level element.
    this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
    if (this.enableKeyboardNavigation)
        var self = this;
        Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
        Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
        Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
    return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
    return this.currentPanel;
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
    var panels = this.getPanels();
    for( var i = 0 ; i < panels.length; i++ )
        if( panel == panels[i] )
            return i;
    return -1;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
    return this.getPanelIndex(this.currentPanel);
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
    if (!panel)
        return null;
    return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
    if (!panel)
        return null;
    return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
            children.push(child);
        child = child.nextSibling;
    return children;
Spry.Widget.Accordion.prototype.focus = function()
    if (this.element && this.element.focus)
        this.element.focus();
Spry.Widget.Accordion.prototype.blur = function()
    if (this.element && this.element.blur)
        this.element.blur();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
    this.timer = null;
    this.interval = 0;
    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;
    this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
    this.onComplete = null;
    this.panel = panel;
    this.panelToOpen = accordion.getElement(panel);
    this.panelData = [];
    this.useFixedPanelHeights = accordion.useFixedPanelHeights;
    Spry.Widget.Accordion.setOptions(this, opts, true);
    this.interval = Math.floor(1000 / this.fps);
    // Set up the array of panels we want to animate.
    var panels = accordion.getPanels();
    for (var i = 0; i < panels.length; i++)
        var p = panels[i];
        var c = accordion.getPanelContent(p);
        if (c)
            var h = c.offsetHeight;
            if (h == undefined)
                h = 0;
            if (p == panel && h == 0)
                c.style.display = "block";
            if (p == panel || h > 0)
                var obj = new Object;
                obj.panel = p;
                obj.content = c;
                obj.fromHeight = h;
                obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                obj.distance = obj.toHeight - obj.fromHeight;
                obj.overflow = c.style.overflow;
                this.panelData.push(obj);
                c.style.overflow = "hidden";
                c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
    var self = this;
    this.startTime = (new Date).getTime();
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
    if (this.timer)
        clearTimeout(this.timer);
        // If we're killing the timer, restore the overflow
        // properties on the panels we were animating!
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            obj.content.style.overflow = obj.overflow;
    this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    var i, obj;
    if (elapsedTime >= this.duration)
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            if (obj.panel != this.panel)
                obj.content.style.display = "none";
                obj.content.style.height = "0px";
            obj.content.style.overflow = obj.overflow;
            obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
        if (this.onComplete)
            this.onComplete();
        return;
    for (i = 0; i < this.panelData.length; i++)
        obj = this.panelData[i];
        var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
        obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);

Can clicking on an Accordion Tab also open a separate Spry Data region?

I am generating a spry Acordion to list programs for an organization. When someone clicks on a tab and the content shows below I would like a set of photos and comments to open in a different adjacent div. I am wondering if the tab could act as the sorting catagory for a set the images/comments to appear next to the Acordion. Is it possible? I am new to all this and do not know javascript.

Here is what I have so far:
http://www.suffieldeaa.org/ProgR4.html
The example you sent seems to put the content to the right that includes pictures and text. What I want is the content as a usual Accordion box and also opens a data set to the right where my fixed images are. My data set would include images of the related content and also include quotes. The html in your example doesn't seem to clearly reflect where the Accordion is and where the dataset region is unless it is just the Accordion only. I hope I am making sense.....

Muse Accordion tab - opening up instead of down.

I have a working accordion widget with about 10 tabs.
Suddenly noticed that two of the tabs are opening UP instead of DOWN....
meaning that the tab is at the bottom of the open panel instead of at the top as I would prefer.
At one time all were opening DOWN with the title tab at the top of the open panel...
but now those few are different and I dont know what i did and cannot find
a MUSE control for the behavior.
Dreamweaver help articles refer to controls that do not seem available in MUSE.
Any direction appreciated.
Thanks.
MP

Hello,
When you say the tabs are opening up UP instead of DOWN, are you talking about the design view of Muse or in the preview/publishes site?
Could you please provide us a link to your site where we can see the issue?
Regards,
Sachin

Delay Accordion tab mouse over

Right now I have my accordion set to change on mouseover, however I would like it to only open if it is on a tab for a certain time. Someone else on the forums did this with a tab spry, but I was wondering how to do this with an accordion. Here is their solution for a tabbed one:
Re: Need a delay for showPanel in the Tabbed Panels
You basically want something like this then:
gShowTabTimer = 0;
function ShowTab(tab)
gShowTabTimer = setTimeout(function(){ gShowTabTimer = 0; tp1.showPanel(tab); }, 1000);
function KillTabTimer()
if (gShowTabTimer)
clearTimeout(gShowTabTimer);
gShowTabTimer = 0;
<li class="TabbedPanelsTab" onmouseover="ShowTab(this);" onmouseout="KillTabTimer();">
How should I change my code and where do I insert it?
Thanks Jacey

still looking for any help?
Jacey

Accordion tabs

Similar Messages

Maybe you are looking for