Spry

Set the default open panel

Comments

Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.

Comments

KCWebMonkey2 said on May 21, 2007 at 10:55 AM :

I would like to know how to set all panels closed by default. Apparently there is no option for this?

aloxeSpace said on Jun 12, 2007 at 2:51 AM :

Use the following structure to set all panels to closed:

var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ duration: 50,useFixedPanelHeights: false, defaultPanel: -1 });

DKoz said on Jun 19, 2007 at 1:24 PM :

I, too, am having problems setting the code so that no panels open on page load. I tried setting the panel number to a -1 as previously described but even though no panel opens on page load, I can't get any of the panel to open even when I clcik on them.

Here is the code that near the bottom of my html page:

var Accordion1 = new Spry.Widget.Accordion("Week1", {defaultPanel: -1, enableAnimation: false});

Suggestions are appreciated.

Thanks in advance, Dan

aloxeSpace said on Jul 7, 2007 at 2:57 PM :

make sure you set 'useFixedPanelHeights' to false otherwise you will get an error and the panels won't open.

ShannaraAlaska said on Sep 28, 2007 at 10:11 AM :

All of the above options do not work with the newest coldfusion/dreamweaver. Is there a real way to make all the panels close by default? As it stands, you cannot open and close panels at all.

Donald Booth said on Sep 28, 2007 at 10:14 AM :

Hi All,
This sample shows how to start the page with all panels closed.
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsClosed
Hope this helps.
Donald Booth
Adobe Spry Team

G4 Mac said on Nov 19, 2007 at 1:28 PM :

This looks easy enough and the example at the URL is just what I am
looking for. But where does that line of code go? All those examples seem to
assume that the reader knows perfectly well where it goes. Thats pretty
frustrating if one is trying to learn, you know? Also, I hope that Adobe is
planning to integrate all this into DW better. I think all these options should
be accessible via the Properties bar or the Behaviors panel. seems the
obvious way.

jonmichael said on Dec 4, 2007 at 12:22 PM :

The code being talked about here goes in the Accordion widget constructor. For an overview of the widget, including where the constructor is in the code, see this page in LiveDocs:

http://livedocs.adobe.com/en_US/Spry/1.4/WSD921E52B-C456-4a7b-A890-14E27A251515.html

G4 Mac said on Dec 6, 2007 at 6:49 PM :

thank you for the response. However, it is only slightly helpful. This is a
problem that I have had often when asking questions such as this.
Experts (such as yourselves) assume a little bit of knowledge on my part
(or maybe a lot) and give an answer that you understand. But javascript is
something I barely have any knowledge of. What I need in this sort of
situation is something like "take this line of code, find such and such a
spot and paste it in". Other wise, I have no clue and no time to learn
javascript before I deliver something to a client.

I hope you can help me out a little further. Thanks.

jonmichael said on Dec 7, 2007 at 1:03 PM :

This page has the "insert this line here" type of instruction you are looking for:

http://livedocs.adobe.com/en_US/Spry/1.4/WSEB69EA5E-C36A-4b83-8453-474722C85A2B.html

Once you have a basic accordion on your page, you can then tweak various parts of the code to get the result you want. In this case, you would alter the constructor in order to set a default open panel.

Hope this helps.

No screen name said on Jan 21, 2008 at 12:26 PM :

this has been extremely helpfull. Thank you very much!

datatechnique said on Feb 27, 2008 at 11:26 AM :

I will try the above method for having all panels closed. I, by accident, found that the panels default to the closed state if you insert an h1 tag in your markup inside the Accordion containing div before the First panel. For menus in which I did not want a title, I simply set the margin, padding, height, line-height and display of the .Accordion h1 to zero or none respectively in the CSS and just inserted a non-breaking space into the markup.

This is obviously not a valid logic but I've used it and it seems to be good in I.E. 6 and up, Firefox, Safari and Opera.

Thanks, I'll give the, hopefully, real solution a try!