Link to home
Start Free TrialLog in
Avatar of ironpen45
ironpen45

asked on

close all collapsible spry panels in Dreamweaver

is there a switch or coding to close all spry collapsible panels? for example, if i have 6 open panels and i want to close all (without refreshing the page) by clicking an image or whatever ("Close All"). thanks!
ASKER CERTIFIED SOLUTION
Avatar of irocwebs
irocwebs

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ironpen45
ironpen45

ASKER

iroc: can't make it to work. it just keeps jerking upward i took a look at the adobe example which is identical to what you posted, except there was a DIV that is needed to tag the entire set of panels

<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">

it's probably a naming issue, but can't figure it.

the respective sections of code are attached. the dots are blah, blah, etc.
....<head>

<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
function closeAll(){
      Spry.$$(".CollapsiblePanel").forEach(function(n) { window[n.id].close(); });
}
function openAll(){
      Spry.$$(".CollapsiblePanel").forEach(function(n) { window[n.id].open(); });
}
</script>
.............
</head>

<body>
............
<p>
<a href="#" onclick="cp1.openAllPanels();">Open All</a>  | <a href="#" onclick="cp1.closeAllPanels();">Close All</a>   
</p>

<p>    <div align="center">

<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">

    <table width="424" class="collapseback">
    	  <td width="416" >  
        <table width="420">
        <tr>
            <td width="64" align="center" bgcolor="#FFFF00"><font color="#000000"><strong>Open</strong></font></td>
            <td align="left">
            	<div id="CollapsiblePanel1" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">All Levels welcome. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are generally for all levels of dancing. While starters are welcomed, we suggest that you have at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. Some topics are general introduction with varying or increasing level of difficulty. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
		</td>
        </tr>
            <td bgcolor="#0033FF" align="center"><strong>Level 1</strong></td>
            <td align="left">
            	<div id="CollapsiblePanel2" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">Starters. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are strictly for those new to Salsa. All starters are encouraged to attend these workshops as these provide solid foundations for dancing. No experience necessary, just patience and lots of energy! <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
            </td>
        </tr>
            <td bgcolor="#9933CC" align="center"><strong>Level 2</strong></td>
            <td align="left">
            	<div id="CollapsiblePanel3" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">Advanced Social Beginners. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are for those who have taken at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
            </td>
        </tr>
            <td bgcolor="#009933" align="center"><strong>Level 3</strong></td>
            <td align="left">
            	<div id="CollapsiblePanel4" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">Intermediate Social Dancers &amp; Student Performers. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are those who have performed for at least 1 year in their student team or social dancing with the proficiency beyond Level 2. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
            </td>
        </tr>
            <td bgcolor="#FF6600" align="center"><strong>Level 4</strong></td>
            <td align="left">
            	<div id="CollapsiblePanel5" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">Advanced Social Dancers &amp; Semi-Professionals. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are those who have performed for at least 1 year in their semi-pro team or social dancing with the proficiency beyond Level 3. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
            </td>
        </tr>
            <td bgcolor="#FF0000" align="center"><strong>Level 5</strong></td>
            <td align="left">
            	<div id="CollapsiblePanel6" class="CollapsiblePanel">
                        <div class="CollapsiblePanelTab" tabindex="0">Die Hards &amp; Professional Dancers. <font color="#FFFF00">More...</font></div>
                        <div class="CollapsiblePanelContent">These workshops are for.... Well, if we have to tell you, then you need a reality check! These are guaranteed to challenge you like never before. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
				</div>
            </td>
        </tr>
        </table>
        </td>
    </table>   
  </div>      
   </div> 
   

</p>
............

<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID4");
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4",{contentIsOpen:false});
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5",{contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6",{contentIsOpen:false});
var cp1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{contentIsOpen:false});
//-->
</script>
</body>

Open in new window

SpryDOMUtils.js was missing, but it was not included in the page when i created the panels, which do work.

but even with adding the js, still the same problem.

here's the page http://newjerseyinternationalsalsacongress.com/english/workshops.html. thanks.
I don't think it will work with the tables (or at least I couldn't get it to work.) I did, however get it to work with divs & h3 tags. Hope it helps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<BASE HREF="http://newjerseyinternationalsalsacongress.com/english/">
<style type="text/css">
a { text-decoration:none }
#outer #inner #contentwrapper0  #contentwrapper1  #contentwrapper2  #contentwrapper 3  #contentwrapper4  #contentwrapper5 .sidebarwrapper .sidebarbox .sidebar {
	color: #FFF;
}
.collapseback {
	background-image:url("../images/backgndtable200.jpg");
	background-repeat:no-repeat;
	align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NJISC2010 :::: April 22-25, 2010 :::: The Workshops</title>
<link rel="shortcut icon" HREF="../images/logo.ico">
<link href="../p7spepper/p7spepper02.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#inner, #contentwrapper0,  #contentwrapper1,  #contentwrapper2, #contentwrapper3, #contentwrapper4, #contentwrapper5, .footer ul a {zoom: 1; height: 1%; overflow: visible;} .sidebarwrapper {display: inline; width: 194px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
.sidebarwrapper {width: 200px;}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="../shadowbox-build-3.0b/shadowbox.js"></script>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript">
Shadowbox.init({
    language: "en",
    players:  ["img","swf","html","iframe"]
	//flashParams:	{wmode:'opaque'}
});
</script>
<script type="text/javascript">
function openShadowbox(content, player, title){
    Shadowbox.open({
        content:    content,
        player:     player,
        title:      title,
		height:      548, 
		width:       700
    });
}
</script>

<script src="../Scripts/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="../p7pmm/p7PMMscripts.js"></script>
<link href="../p7pmm/p7PMMh15.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
<!--
function MM_validateForm()
          { //v4.0
              if (document.getElementById)
              {
                var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
                for (i=0; i<(args.length-2); i+=3)
                {
                  test=args[i+2];
                  val=document.getElementById(args[i]);
                  if (val)
                  {
                        nm=val.name;
                        if(val != null && test=='checked')
                        {
                              if(!val.checked)
                              errors += '- '+nm+' must be checked.\n';
                        }
                        else if ((val=val.value)!="")
                        {
                              if (test.indexOf('isEmail')!=-1)
                              {
                                    p=val.indexOf('@');
                                    if (p<1 || p==(val.length-1))
                                    errors+='- '+nm+' must contain an e-mail address.\n';
                              }
                              else if (test!='R')
                              {
                                    num = parseFloat(val);
                                    if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
                                    if (test.indexOf('inRange') != -1)
                                    {
                                          p=test.indexOf(':');
                                          min=test.substring(8,p); max=test.substring(p+1);
                                          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
                                    }
                              }
                        }
                        else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n';
                  }
                }
                if (errors) alert('The following error(s) occurred:\n'+errors);
                document.MM_returnValue = (errors == '');
              }
          }
//-->
</script>

<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
function closeAll(){
      Spry.$$(".CollapsiblePanel").forEach(function(n) { window[n.id].close(); });
}
function openAll(){
      Spry.$$(".CollapsiblePanel").forEach(function(n) { window[n.id].open(); });
}
</script>



</head>

<body>


<p align="center"><a href="javascript:none;" onclick="cp1.openAllPanels();">Open All</a> | <a href="javascript:none;" onclick="cp1.closeAllPanels();">Close All</a></p>

<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">


<div id="CollapsiblePanel1" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">All Levels welcome. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are generally for all levels of dancing. While starters are welcomed, we suggest that you have at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. Some topics are general introduction with varying or increasing level of difficulty. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>


<div id="CollapsiblePanel2" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">Starters. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are strictly for those new to Salsa. All starters are encouraged to attend these workshops as these provide solid foundations for dancing. No experience necessary, just patience and lots of energy! <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>


<div id="CollapsiblePanel3" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">Advanced Social Beginners. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are for those who have taken at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>


<div id="CollapsiblePanel4" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">Intermediate Social Dancers &amp; Student Performers. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are those who have performed for at least 1 year in their student team or social dancing with the proficiency beyond Level 2. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>


<div id="CollapsiblePanel5" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">Advanced Social Dancers &amp; Semi-Professionals. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are those who have performed for at least 1 year in their semi-pro team or social dancing with the proficiency beyond Level 3. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>


<div id="CollapsiblePanel6" class="CollapsiblePanel">
<h3 class="CollapsiblePanelTab" tabindex="0">Die Hards &amp; Professional Dancers. <font color="#FFFF00">More...</font></h3>
<div class="CollapsiblePanelContent">
These workshops are for.... Well, if we have to tell you, then you need a reality check! These are guaranteed to challenge you like never before. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.
</div>
</div>

</div>

<script type="text/javascript">
var cp1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{contentIsOpen:false});
</script>
</body>
</html>

Open in new window

SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
jason: i grouped these following the adobe example, but now the entire thing doesn't work. is it that spry objects can't be separated by table objects or tags?

if that's the case, is there a way i can get the same effect per single panel?

the current buggy one is still http://newjerseyinternationalsalsacongress.com/english/workshops.html.

the previous working one is now http://newjerseyinternationalsalsacongress.com/english/workshopsold.html

thanks!
Not seeing where you tried to implement a group in

http://newjerseyinternationalsalsacongress.com/english/workshops.html

I see <div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup"> but it surrounds only one panel, so there is no benefit to grouping there.

Consider the following:

<p><a href="#" onclick="cp1.openAllPanels();">Open all panels.</a></p>

<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
<div class="CollapsiblePanel CollapsiblePanelClosed">
<div class="CollapsiblePanelTab" tabindex="0">
<table>
<tbody><tr>
<td align="center"
bgcolor="#ffff00" width="64"><font color="#000000"><strong>Open</strong></font></td>
<td align="left">All Levels
welcome. <font color="#ffff00">More...</font></td>
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelContent">These workshops
are generally for all levels of dancing. While starters are welcomed, we
suggest that you have at least 3 continuous months of formal
instruction and about 6 months of social dancing to make the most out
the workshop. Some topics are general introduction with varying or
increasing level of difficulty. <a
href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact
us</u></a> if you have any questions.</div>
</div>
<div class="CollapsiblePanel CollapsiblePanelClosed">
<div class="CollapsiblePanelTab" tabindex="0">
<table>
<tbody><tr>
<td align="center"
bgcolor="#ffff00" width="64"><font color="#000000"><strong>Open</strong></font></td>
<td align="left">All Levels
welcome. <font color="#ffff00">More...</font></td>
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelContent">These workshops
are generally for all levels of dancing. While starters are welcomed, we
suggest that you have at least 3 continuous months of formal
instruction and about 6 months of social dancing to make the most out
the workshop. Some topics are general introduction with varying or
increasing level of difficulty. <a
href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact
us</u></a> if you have any questions.</div>
</div>
</div>

This code will allow you to click on "Open all panels" and the two panels in the group div will open.

>> is it that spry objects can't be separated by table objects or tags?

Not sure where you are going with this question. Spry objects need valid HTML, so you can't have something like this:

<div>
<table>
</div>
</table>

But a collapsible panel group requires one or more panels inside of one div with a unique id and the CollapsiblePanelGroup class applied to it. You can have any amount of stuff in that div in addition to the panels.

Make sense?
found the solution: i just created 6 collapsible groups with the rest of objects and contained in a cell. then created their respective cp2 to cp6 at the bottom. then the onclick calls all cp1 to cp6 together.

a little clunky, but it works. thanks guys.

now if there was a way to use <a href="#"> in calling the cp1 to cp6 without that jerky motion. i know i can use a button but just wanted to use text.
<table width="424" class="collapseback">
            <table width="420">
            <tr>
                <td width="64" align="center" bgcolor="#FFFF00"><font color="#000000"><strong>Open</strong></font></td>
                <td align="left">
                <div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
                    <div iclass="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">All Levels welcome. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are generally for all levels of dancing. While starters are welcomed, we suggest that you have at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. Some topics are general introduction with varying or increasing level of difficulty. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </div>       
            </td>
            </tr>
                <td bgcolor="#0033FF" align="center"><strong>Level 1</strong></td>
                <td align="left">
                <div id="CollapsiblePanelGroup2" class="CollapsiblePanelGroup">
                    <div class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">Starters. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are strictly for those new to Salsa. All starters are encouraged to attend these workshops as these provide solid foundations for dancing. No experience necessary, just patience and lots of energy! <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </div>       
                </td>
            </tr>
                <td bgcolor="#9933CC" align="center"><strong>Level 2</strong></td>
                <td align="left">
                <div id="CollapsiblePanelGroup3" class="CollapsiblePanelGroup">
                    <div class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">Advanced Social Beginners. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are for those who have taken at least 3 continuous months of formal instruction and about 6 months of social dancing to make the most out the workshop. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </div>       
                </td>
            </tr>
                <td bgcolor="#009933" align="center"><strong>Level 3</strong></td>
                <td align="left">
                <div id="CollapsiblePanelGroup4" class="CollapsiblePanelGroup">
                    <div class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">Intermediate Social Dancers &amp; Student Performers. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are those who have performed for at least 1 year in their student team or social dancing with the proficiency beyond Level 2. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </td>
            </tr>
                <td bgcolor="#FF6600" align="center"><strong>Level 4</strong></td>
                <td align="left">
                <div id="CollapsiblePanelGroup5" class="CollapsiblePanelGroup">
                    <div class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">Advanced Social Dancers &amp; Semi-Professionals. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are those who have performed for at least 1 year in their semi-pro team or social dancing with the proficiency beyond Level 3. Formal instruction experience varies as well as social dancing. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </div>       
                </td>
            </tr>
                <td bgcolor="#FF0000" align="center"><strong>Level 5</strong></td>
                <td align="left">
                <div id="CollapsiblePanelGroup6" class="CollapsiblePanelGroup">
                    <div class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="0">Die Hards &amp; Professional Dancers. <font color="#FFFF00">More...</font></div>
                            <div class="CollapsiblePanelContent">These workshops are for.... Well, if we have to tell you, then you need a reality check! These are guaranteed to challenge you like never before. <a href="http://newjerseyinternationalsalsacongress.com/english/contact.html"><u>Contact us</u></a> if you have any questions.</div>
                    </div>
                </div>       
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right"><a href="#" onclick="cp1.closeAllPanels();cp2.closeAllPanels();cp3.closeAllPanels();cp4.closeAllPanels();cp5.closeAllPanels();cp6.closeAllPanels();">Open All</a>  | <a href="#" onclick="cp1.closeAllPanels();cp2.closeAllPanels();cp3.closeAllPanels();cp4.closeAllPanels();cp5.closeAllPanels();cp6.closeAllPanels();">Close All</a></td>
            </tr>
            </table>
            </td>
        </table>   

<script type="text/javascript">
var CollapsiblePanelGroup1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup1",{contentIsOpen:false});
var CollapsiblePanelGroup2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup2",{contentIsOpen:false});
var CollapsiblePanelGroup3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup3",{contentIsOpen:false});
var CollapsiblePanelGroup4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup4",{contentIsOpen:false});
var CollapsiblePanelGroup5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup5",{contentIsOpen:false});
var CollapsiblePanelGroup6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanelGroup6",{contentIsOpen:false});
var cp1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{contentIsOpen:false});
var cp2 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup2",{contentIsOpen:false});
var cp3 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup3",{contentIsOpen:false});
var cp4 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup4",{contentIsOpen:false});
var cp5 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup5",{contentIsOpen:false});
var cp6 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup6",{contentIsOpen:false});
</script>

Open in new window

you learn somethin' new every day!
>> <a href="#">

<a href="javascript: void;">
hlol! works like charm! thanks so much!