Multiple Spry Collapsible Panels with different Open-Close defaults

Hello,
The site I am working on has a page with (5) Spry collapsable panels. (4) are set default open, (1) is set default closed.
I am trying to get (3) Open, and (2) closed. However, setting a second panels default to closed gives a syntax error.
Anyone know how to make it work, if it can at all?

Remove the closing parenthesis after "CollapsiblePanel5". It should be like this:
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen: false} );

Similar Messages

How to apply different styles to multiple spry collapsible panels?

Hello every.
I would really appreciate some help with this problem I am coming up against.
I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
Can someone please advise me how to do this?
Thank you in advance for your help.
Kind regards
Elliot

I've figured the most of it out.
By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
I only want to have different Tab backgrounds and Hover backgrounds
1st Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
CSS Style
.CollapsiblePanelTab
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
2nd Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
<div class="CollapsiblePanel2Content">Content</div>
</div>
.CollapsiblePanel2Tab
.CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
Has anyone any ideas on how to get around this?
Kind regards
Elliot

Spry collapsible panel with spry data

I have created a spry collapsible panel and wanted to put
srpy data in it, to dynamically load.
i also want to hide the entire panel if no data is available.
It will show the data, but the click to open/close does not
work.
here is the code.

I have made some progress, thanks, however im still getting
some odd formatting issues, for example, the 1st panel shows with
different design to the rest of the panels.
this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}"
class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
{amended}</h1></div>
<div
class="CollapsiblePanelContent"><strong>{message}</strong>
Added by <strong>{owner}</strong> on
<strong>{added} </strong>(REF:
<strong>{id}</strong>) <a href="/service/index.asp"
target="_self">View full details</a></div>
</div>
<script type="text/javascript">

</script>
As you can see, I am inserting {ds_RowID} in the variable
name, in order for the panels to operate independantly, however
have I coded it correctly?

Spry accordion panel won't open by default

Here is my code for spry accordion, I am trying to open the 1st inside accordion panel by default, i f not by default, as soon as its parent is opened, but none of them seems to work. Please let me know where I am going wrong.
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/view/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="/csm/view/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="main2ndAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;">System</a></div>
<div class="AccordionPanelContent">
<a id="kernelParamsAccordion">Kernel Parameters</a><br/>
<a id="diskUsageAccordion">Disk Usage</a><br/>
<a id="fileSystemAccordion">File System Statistics</a><br/>
<a id="osPatchesAccordion">Os Patches</a><br/>
<a id="networkAccordion">Network</a><br/>
<a id="userLimitAccordion">User Limit</a><br/>
<a id="environmentVariablesAccordion">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="productName" style="color:#ffffff;background-color: #2F5882;"></a></div>
<div class="AccordionPanelContent">
<a id="odbcAccordion">ODBC</a><br/>
<a id="bitmodeAccordion">Bitmode</a><br/>
<a id="versionAccordion">Version</a><br/>
<a id="licenseInformationAccordion">License Information</a><br/>
<a id="dumpshrAccordion">Dumpshr</a><br/>
<a id="dblistAccordion">DBList</a><br/>
<a id="showtimeAccordion">Showtime</a><br/>
<a id="serverStatusAccordion">Server Status</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("main2ndAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
Also the System panel, with id="systemAccordion" takes 2 clicks to open, every 1st time the page loads

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
#Accordion2 .AccordionPanelTab {
     background-color: #CCCCCC;
     color: #FFFFFF;
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/healthicon.gif">Health Check</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/conficon.gif">Configuration</div>
    <div class="AccordionPanelContent">
         <div id="Accordion2" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">System</div>
             <div class="AccordionPanelContent">
            <a href="#" id="kernelParamsAccordion">Kernel Parameters</a><br/>
            <a href="#" id="diskUsageAccordion">Disk Usage</a><br/>
            <a href="#" id="fileSystemAccordion">File System Statistics</a><br/>
            <a href="#" id="osPatchesAccordion">Os Patches</a><br/>
            <a href="#" id="networkAccordion">Network</a><br/>
            <a href="#" id="userLimitAccordion">User Limit</a><br/>
            <a href="#" id="environmentVariablesAccordion">Environment Variables</a><br/>
          </div>
         </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">Product</div>
             <div class="AccordionPanelContent">
            <a href="#" id="odbcAccordion">ODBC</a><br/>
            <a href="#" id="bitmodeAccordion">Bitmode</a><br/>
            <a href="#" id="versionAccordion">Version</a><br/>
            <a href="#" id="licenseInformationAccordion">License Information</a><br/>
            <a href="#" id="dumpshrAccordion">Dumpshr</a><br/>
            <a href="#" id="dblistAccordion">DBList</a><br/>
            <a href="#" id="showtimeAccordion">Showtime</a><br/>
            <a href="#" id="serverStatusAccordion">Server Status</a><br/>
          </div>
         </div>
       </div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js" ></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1, useFixedPanelHeights:false});
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: 0, useFixedPanelHeights:false});
</script>
</body>
</html>
Gramps

My spry collapsible panel will not open or close

I've been working on a website in dreamweaver cs5 and im trying to add a collapse panle with text feild and submit button to it so people can signup to get more info and be apart of the email list. i have the animation button checked in the properties and the default postion set on closed, but when i go to live veiw or test it on the net it is in the open position and will not animate.... Any help out there....

Have a look at these samples http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
Gramps

Multiple SPRY Collapsible Panel Defaults

I have a page with three collapsible bars and want the only the first to be open and the other two to be closed when the page loads. How do I do this?

I figured this one out - duh! The properties panel allows you to set the panel defaults to opened or closed.

Spry Collapsible Panels - Way to set them open only once per visit?

I'm wondering if there is a way to set a Spry Collapsible
Panel to be automatically open on the initial loading of the site,
but as people navigate around the site and back and forth from the
home page, to be able to have it closed on subsequent visits to the
home page.
Right now I have a collapsible panel set to OPEN by default
when someone first hits the home page, but if they navigate around
the site and then click to the home page again, they get the panel
open again. Naturally, that will end up annoying people.
Any suggestions?
Thanks in advance!
Sara

Flash local shared object can help with this. Here is some info:
http://www.bestflashanimationsite.com/tutorials/4/
http://www.permadi.com/tutorial/flashSharedObject/index.html
http://www.kirupa.com/developer/mx/sharedobjects.htm
Best wishes,
Adninjastrator

Dynamic data in Spry Collapsible Panel

Hi guys,
Am trying to get data from a Data Set into the Spry
Collapsible Panel, with little luck. Have tried the following and
was wondering if i am doing something wrong?
<div spry:region="dsProduct">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="0">{product_name}</div>
<div
class="CollapsiblePanelContent">">{product_details}</div>
</div>
</div>
This example displays the field i want from the data set
{product_name}, but will not collapse open the panel containing
{product_details}.
Any suggestions?

hi Jay,
will this help you?
Forum
thread

Collapsible Panels - Links to open one, and close others

Hi,
I am new to Dreamweaver and have been creating my site by
learning as I go along. I have already read through all the other
related topics associated with Collapsible Panels on this blog and
have still not found an answer. I have been able to open and close
Collapsible Panels by using links - but unfortunately, I need more
than just opening and closing.
On my site i have approximately 5 pages, all with the same
header and Menu bar. The Information (that i have presented in
numerous Collapsible Panels) does however vary from page to page.
What I need to try and figure out is:
How can I open one collapsible panel and close all others? I
have seen the one example which leads to my next question:
How can I group Panels? Some examples of how to open one and
close all others use this grouping. Is there any other way of
opening one and closing all others without grouping?
Lastly, is it possible to set up a link that can be viewed on
one page which when clicked opens the relevant page and collapsible
panel? i.e. on my About Us page there is a link (using the Menu
bar) for one of my several services on the services drop down menu
(but services is on a different page with the same setup). When a
viewer clicks on the specific service, is it possible to get the
site to open the services page, and open the relevant collapsible
panel (with all other Panels closed)?
Any assistance would be greatly appreciated - I have been
searching for days now and cannot seem to find any
answers/directions in laymans terms.
Kind regards,
John

wlsjoh013 wrote:
> Hi,
>
> I am new to Dreamweaver and have been creating my site
by learning as I go
> along. I have already read through all the other related
topics associated
> with Collapsible Panels on this blog and have still not
found an answer. I
> have been able to open and close Collapsible Panels by
using links - but
> unfortunately, I need more than just opening and
closing.
>
> On my site i have approximately 5 pages, all with the
same header and Menu
> bar. The Information (that i have presented in numerous
Collapsible Panels)
> does however vary from page to page. What I need to try
and figure out is:
>
> How can I open one collapsible panel and close all
others? I have seen the one
> example which leads to my next question:
This page has an example that has a link that can open and
close a panel:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
One way to do this would be to have a single link that would
open one of your panels using the code, but then add to it code
that closes each of the other panels, for example:
<a href="#"
onclick="CollapsiblePanel4.open();CollapsiblePanel5.close();CollapsiblePanel6.close();">O pen
4, close 5 and 6</a>
To make this work, you'll need to look that the panel
constructors at the bottom of your page and make sure to match up
the panel variable names i.e. "var CollapsiblePanel1 =...." the
variable is CollapsiblePanel1.
You could also write a function that gathers together the
various panels you have on the page and then pass to it only the
panel that you want kept open. For now, though, it might be best to
use the above method, given your expertise. And taking that even
further, you could apply the function call unobtrusively. Both the
function call and the unobtrusive part you can work on later to get
this working for now.
> How can I group Panels? Some examples of how to open one
and close all others
> use this grouping. Is there any other way of opening one
and closing all
> others without grouping?
This is a little confusing, on one hand you ask about how to
group, but then ask how not to group. There is a concept of a
collapsible panel group:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
But there is another type of group, that may be more what
you're looking for, and that's an Accordion panel, which is similar
to the collapsible panel group, with the exception that it can only
have one panel open at a time.
> Lastly, is it possible to set up a link that can be
viewed on one page which
> when clicked opens the relevant page and collapsible
panel? i.e. on my About Us
> page there is a link (using the Menu bar) for one of my
several services on the
> services drop down menu (but services is on a different
page with the same
> setup). When a viewer clicks on the specific service, is
it possible to get
> the site to open the services page, and open the
relevant collapsible panel
> (with all other Panels closed)?
Probably the easiest way to do this particular one would be
to make sure that you have all of the panels set to be closed when
the page loads, and then take a look at the code for the last
example on this page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
That example uses a tabbed panel, but the concept is the
same, use a URL parameter to determine what to show. You'll need to
link in the SpryURLUtils file in the Spry download package (look in
the includes folder):
http://labs.adobe.com/technologies/spry/home.html
Essentially, your link will look similar to:
sample.html?panel=1
Then your code could look something like:
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:(params.panel==1 )} );
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2",
{contentIsOpen:(params.panel==2 )} );
Basically what this is doing is creating an object from the
URL parameters. Then for each of the panels the constructor has
code that determines whether or not to expand the panel when the
page loads. So it checks the value of params.panel to see if it
matches 1 (for the first one), if it does, then that means that
contentIsOpen is set to true, if it is some other number or is not
present at all, then that means that the panel is closed. This
would then be repeated down the line for how ever many panels you
want to operate like that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

How to make Spry Collapsible Panels open one at a time?

Hello,
I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
I was told you would probably help me find the right answer by Hans-g!
Thanks again!

Need help with spry collapsible panel (menu)

I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well. Now this is what I want to add to the page:
I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
Once selected it will move directly to that panel and open it.
I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
Is there a way this can be done? Please help
I'm really not that good at this stuff- please be easy with your response- thank you

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
Thank you!

Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
Here is a better example of what I would prefer: Houston Public Library
If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
Any assistance is very much appreciated.
Thank you!

Need help with Spry Collapsible panels

I'm fairly inexperienced with Dreamweaver (CS4) and especially new to the Spry feature, so bear with me... I need all the help I can get! I've inserted six Spry collapsible panels to an HTML page and uploaded everything (including SpryCollapsiblePanel.css and SpryCollapsiblePanel.js), but they're automatically displaying as open and I can't click on them or close them. I'd like them to be closed until selected and opened.
What am I doing wrong?
Here's the URL: http://www.nicolegriffith.com/trustm.html
Thank you!

I just looked at your code, and your SpryAssets content is not there. This is the extent of your SpryCollapsablePanel.js
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>404 - Not Found</title>
</head>
<body>
<h1>404 - Not Found</h1>
</body>
</html>
Make sure your spry assests folder is in your root directory and upload the files once you know they are where they should be.
Gary

Help with spry collapsible panel

I have several spry collapsible panels that I am using for
navigation and want an open panel to close automatically when a new
one is opened. Can this be done? I checked the "customuze this
widget" in the property inspector but does not give any info on the
behavior of them. I am sure it is in the java code but I am not a
Java expert by any means.

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Spry Collapsible Panel Problem with Safari

Hi my Spry Collapsible Panel looks great in Firefox, Camino, and IE, but the top border, which I am using as a line to divide items in the list, and which I have specified in the CSS page, doesn't show up in Safari and Google Chrome. Just nothing, and everything else works. Any help would be GREATLY appreciated!   My CSS page reads as follows:
.CollapsiblePanel {
    color: #000000;
    border-top-style: solid;
    border-top-width: 0.5px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
#apDiv3 #CollapsibleLINE {
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: #330099;
.CollapsiblePanelTab {
    margin: 0px;
    padding: 20px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: #3366FF;
    border-top-width: thick;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-top-color: #FF00CC;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
/* 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;
.CollapsiblePanelTab a {
    text-decoration: none;
/* 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 {
    color: #666666;
.CollapsiblePanelFocused .CollapsiblePanelTab {
#apDiv1 .overlay {
and my page looks like this:
<link href="untitled.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style type="text/css">

div:active, div:focus, div:hover {
    outline-style: none;
    -moz-outline-style:none;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" >
<style type="text/css">

</style>
<div id="apDiv5"><img src="IMAGES/logo3.jpg" width="843" height="83" /></div>
<div id="frontphoto"></div>
<div id="apDiv1"><img src="IMAGES/Backgound.jpg" alt="back" width="1032" height="516" /></div>
<div id="apDiv2"><img src="IMAGES/overlay.png" alt="Overlay" width="174" height="720" /></div>
<div id="apDiv3">
<div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">photography</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">portraits</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">events</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">landscapes</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">experiments</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">print</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">posters</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">books & packaging</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">invitations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">motion</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">websites</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">animations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">about</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">honors</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">background</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">contact</font></div>
    <div class="CollapsiblePanelContent">
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        
        <tr>
          <td width="114"><a href="mailto:[email protected]" style="text-decoration:none"><font color="#333333" size="2" face="Georgia, Times New Roman, Times, serif">email</font></a></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">202.321.4248</font></em></td>
        </tr>
      </table>
    </div>
</div>
</div>
<script type="text/javascript">

</script>

I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.

Multiple Spry Collapsible Panels with different Open-Close defaults

Similar Messages

Maybe you are looking for