Collapsible Spry Trouble

Question

Hi everyone,
I've tried everything I can think of to fix this, to no
avail, so hopefully someone here can enlighten me.
The collapsible spry on my page is already expanded when the
page is opened, but I'd obviously rather have it collapsed for the
readers to decide whether to open it or not.
Here's the code, and if anyone can help, I'd really
appreciate any help.
Cheers!
Tom

Answer 1

From this page:
http://labs.adobe.com/technologies/spry/articles/collapse_panel/index.html
Set the default state of the panel
By default the Collapsible Panel widget is open when the web
page loads in a browser. You can, however, change the status of the
panel if you want the panel to be closed when the page loads.
Set the contentIsOpen option in the constructor as follows:
<script type="text/javascript">
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen:
false });
</script>
Ken Ford
Adobe Community Expert - Dreamweaver/ColdFusion
Fordwebs, LLC
http://www.fordwebs.com
"tomjamesgreen" <[email protected]> wrote in
message news:[email protected]...
> Hi everyone,
>
> I've tried everything I can think of to fix this, to no
avail, so hopefully
> someone here can enlighten me.
> The collapsible spry on my page is already expanded when
the page is opened,
> but I'd obviously rather have it collapsed for the
readers to decide whether to
> open it or not.
>
> Here's the code, and if anyone can help, I'd really
appreciate any help.
>
> Cheers!
> Tom
>
> @charset "UTF-8";
>
> /* SpryCollapsiblePanel.css - Revision: Spry Preview
Release 1.4 */
>
> /* Copyright (c) 2006. Adobe Systems Incorporated. All
rights reserved. */
>
> /* This is the selector for the main CollapsiblePanel
container. For our
> * default style, the CollapsiblePanel is responsible for
drawing the borders
> * around the widget.
> *
> * If you want to constrain the width of the
CollapsiblePanel widget, set a
> width on
> * the CollapsiblePanel container. By default, our
CollapsiblePanel expands
> horizontally to fill
> * up available space.
> *
> * The name of the class ("CollapsiblePanel") used in
this selector is not
> necessary
> * to make the widget function. You can use any class
name you want to style
> the
> * CollapsiblePanel container.
> */
> .CollapsiblePanel {
> margin: 0px;
> padding: 0px;
> border-left: solid 0px #CCC;
> border-right: solid 0px #999;
> border-top: solid 0px #999;
> border-bottom: solid 0px #CCC;
> width: 90px;
> }
>
> /* This is the selector for the CollapsiblePanelTab.
This container houses
> * the title for the panel. This is also the container
that the user clicks
> * on to open or close the panel.
> *
> * The name of the class ("CollapsiblePanelTab") used in
this selector is not
> necessary
> * to make the widget function. You can use any class
name you want to style an
> * CollapsiblePanel panel tab container.
> */
> .CollapsiblePanelTab {
> font: bold 0.7em sans-serif;
> background-color: #FFFFFF;
> border-bottom: solid 0px #CCC;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
> width: 90px;
> }
>
> /* This is the selector for a CollapsiblePanel's Content
area. It's important
> to note that
> * you should never put any padding on the content area
element if you plan to
> * use the CollapsiblePanel's open/close animations.
Placing a non-zero
> padding on the content
> * element can cause the CollapsiblePanel to abruptly
grow in height while the
> panels animate.
> *
> * The name of the class ("CollapsiblePanelContent") used
in this selector is
> not necessary
> * to make the widget function. You can use any class
name you want to style a
> * CollapsiblePanel content container.
> */
> .CollapsiblePanelContent {
> margin: 0px;
> padding: 0px;
> width: 90px;
> }
>
> /* An anchor tag can be used inside of a
CollapsiblePanelTab so that the
> * keyboard focus ring appears *inside* the tab instead
of around the tab.
> * This is an example of how to make the text within the
anchor tag look
> * like non-anchor (normal) text.
> */
> .CollapsiblePanelTab a {
> color: black;
> text-decoration: none;
> width: 90px;
> }
>
> /* This is an example of how to change the appearance of
the panel tab that is
> * currently open. The class "CollapsiblePanelOpen" is
programatically added
> and removed
> * from panels as the user clicks on the tabs within the
CollapsiblePanel.
> */
> .CollapsiblePanelOpen .CollapsiblePanelTab {
> background-color: #FFF;
> width: 90px;
> }
>
> /* This is an example of how to change the appearance of
the panel tab as the
> * mouse hovers over it. The class
"CollapsiblePanelTabHover" is
> programatically added
> * and removed from panel tab containers as the mouse
enters and exits the tab
> container.
> */
> .CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
> background-color: #FFF;
> width: 90px;
> }
>
> /* This is an example of how to change the appearance of
all the panel tabs
> when the
> * CollapsiblePanel has focus. The
"CollapsiblePanelFocused" class is
> programatically added and removed
> * whenever the CollapsiblePanel gains or loses keyboard
focus.
> */
> .CollapsiblePanelFocused .CollapsiblePanelTab {
> background-color: #FFF;
> width: 90px;
> }
>