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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Are you including the two external JS scripts?
SpryCollapsiblePanel.js: http://labs.adobe.com/technologies/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.js
SpryDOMUtils.js: http://labs.adobe.com/technologies/spry/includes/SpryDOMUtils.js
SpryCollapsiblePanel.js: http://labs.adobe.com/technologies/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.js
SpryDOMUtils.js: http://labs.adobe.com/technologies/spry/includes/SpryDOMUtils.js
ASKER
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.
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 & 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 & 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 & 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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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://newjerseyinternatio nalsalsaco ngress.com /english/w orkshops.h tml
I see <div id="CollapsiblePanelGroup1 " class="CollapsiblePanelGro up"> 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="CollapsiblePanelGro up">
<div class="CollapsiblePanel CollapsiblePanelClosed">
<div class="CollapsiblePanelTab " tabindex="0">
<table>
<tbody><tr>
<td align="center"
bgcolor="#ffff00" width="64"><font color="#000000"><strong>Op en</strong ></font></ td>
<td align="left">All Levels
welcome. <font color="#ffff00">More...</f ont></td>
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelCon tent">Thes e 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://newjerseyinternatio nalsalsaco ngress.com /english/c ontact.htm l"><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>Op en</strong ></font></ td>
<td align="left">All Levels
welcome. <font color="#ffff00">More...</f ont></td>
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelCon tent">Thes e 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://newjerseyinternatio nalsalsaco ngress.com /english/c ontact.htm l"><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?
http://newjerseyinternatio
I see <div id="CollapsiblePanelGroup1
Consider the following:
<p><a href="#" onclick="cp1.openAllPanels
<div id="CollapsiblePanelGroup1
<div class="CollapsiblePanel CollapsiblePanelClosed">
<div class="CollapsiblePanelTab
<table>
<tbody><tr>
<td align="center"
bgcolor="#ffff00" width="64"><font color="#000000"><strong>Op
<td align="left">All Levels
welcome. <font color="#ffff00">More...</f
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelCon
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://newjerseyinternatio
us</u></a> if you have any questions.</div>
</div>
<div class="CollapsiblePanel CollapsiblePanelClosed">
<div class="CollapsiblePanelTab
<table>
<tbody><tr>
<td align="center"
bgcolor="#ffff00" width="64"><font color="#000000"><strong>Op
<td align="left">All Levels
welcome. <font color="#ffff00">More...</f
</tr>
</tbody></table>
</div>
<div style="display: none; visibility:
visible; height: 0px;" class="CollapsiblePanelCon
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://newjerseyinternatio
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?
ASKER
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.
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 & 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 & 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 & 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>
ASKER
you learn somethin' new every day!
>> <a href="#">
<a href="javascript: void;">
<a href="javascript: void;">
ASKER
hlol! works like charm! thanks so much!
ASKER
<div id="CollapsiblePanelGroup1
it's probably a naming issue, but can't figure it.
the respective sections of code are attached. the dots are blah, blah, etc.
Open in new window