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!
ironpen45Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

irocwebsCommented:
Do you have a working example you can link to or a page you can attach?

// This would go in the head:
<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>

// This is the switch and goes in the body
<a onclick="cp1.openAllPanels();" href="#">Open All</a> | <a onclick="cp1.closeAllPanels();" href="#">Close All</a>

// This would go at the bottom of the page:
<script type="text/javascript">
var cp1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1",{contentIsOpen:false});
</script>

Example found here: http://labs.adobe.com/technologies/spry/articles/data_api/toc.htm
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ironpen45Author Commented:
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

0
irocwebsCommented:
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

ironpen45Author Commented:
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.
0
irocwebsCommented:
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

0
Jason C. LevineNo oneCommented:
Hi ironpen45,

You cannot close several "normal" collapsible panels.  You must group them per the example given here:

http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSample.html

The trick is to surround all collapsible panels with a single div tag like so:

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

and id the group to the spry library as so:

<script language="JavaScript" type="text/javascript">
var cpg1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1");
</script>

Once you have them grouped, the following would work:

<input type="button" value="Close All" onclick="cpg1.closeAllPanels();" />
0
ironpen45Author Commented:
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!
0
Jason C. LevineNo oneCommented:
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?
0
ironpen45Author Commented:
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

0
ironpen45Author Commented:
you learn somethin' new every day!
0
Jason C. LevineNo oneCommented:
>> <a href="#">

<a href="javascript: void;">
0
ironpen45Author Commented:
hlol! works like charm! thanks so much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.