Collapse panels - close all button

Question

I am trying to use the Collapsible Panels widget for a FAQ
page. Each Q/A is in its own CollapsablePanel group, so there are
about 30 of them. I just created unique IDs for each -
ID="CollapsiblePanel1", ID="CollapsiblePanel2", etc.
Any idea how to create buttons to open/close all the panels
at once? I am not that good with Javascript, so any input would be
great and helpful.
Thanks

Answer 1

Hi MiloZ69,
30 panels? Yikes!!! One of the widgets I have on my plate is
a CollapsiblePanelGroup, which is basically the same markup as an
accordion but it allows you to open/close *any* panel. Sounds like
you could sure use that widget right now since it only requires a
single constructor call and object to control all panels.
Until then, you'll have to manage this manually. Make sure
all your collapsible panels have a predictable id like "cp1",
"cp2", etc., then try using this:
<script language="JavaScript" type="text/javascript">
function PanelGroup(idPrefixStr, startIndex, lastIndex,
options)
this.idPrefixStr = idPrefixStr;
this.startIndex = startIndex;
this.lastIndex = lastIndex;
for (i = this.startIndex; i <= this.lastIndex; i++)
var id = this.idPrefixStr + i;
var ele = $(id);
// Call the CP constructor and store the object
// on the element itself so we can retrieve it later.
if (ele)
ele.spryCP = new Spry.Widget.CollapsiblePanel(id, options);
PanelGroup.prototype.getWidget = function(panelIndex)
var widget = null;
var ele = $(this.idPrefixStr + panelIndex);
if (ele)
widget = ele.spryCP;
return widget;
PanelGroup.prototype.openPanel = function(panelIndex)
var w = this.getWidget(panelIndex);
if (w)
w.open();
PanelGroup.prototype.closePanel = function(panelIndex)
var w = this.getWidget(panelIndex);
if (w)
w.close();
PanelGroup.prototype.openAllPanels = function()
for (var i = this.startIndex; i < this.lastIndex; i++)
this.openPanel(i);
PanelGroup.prototype.closeAllPanels = function()
for (var i = this.startIndex; i < this.lastIndex; i++)
this.closePanel(i);
</script>
Instead of calling a constructor for each collapsible panel,
you can then use the PanelGroup constructor which will
automatically call the constructor for each one:
<script language="JavaScript" type="text/javascript">
var cpg = new PanelGroup("cp", 1, 30, { contentIsOpen: false
</script>
Then add your buttons to trigger the appropriate function:
<input type="button" value="Open"
onclick="cpg.openPanel(3);" />
<input type="button" value="Close"
onclick="cpg.closePanel(3);" />
<input type="button" value="Open All"
onclick="cpg.openAllPanels();" />
<input type="button" value="Close All"
onclick="cpg.closeAllPanels();" />
--== Kin ==--