How to open multiple collapsible panels?

Question

http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
This "Open Panel with Link" sample opens only one panel, but
I'd like to open multiple collapsible panels at the same time with
one button/link click.
I'm trying to use a class name "Collapsible Panel" instead of
the id name "cp1, cp2,cp3,cp4, ....", but I'm stuck on how to
open/close by class name.
If anyone knows how to do it, I'm appreciated to hear it.
Thanks,
(^_^)/

Answer 1

I'm not sure if this is what you're going for, but here is an
example of using a text link to open multiple collapsible panels:
<a href="javascript:;"
onclick="CollapsiblePanel1.open();CollapsiblePanel8.open();">Click
to open</a>
<a href="javascript:;"
onclick="CollapsiblePanel1.close();CollapsiblePanel8.close();">Click
to close</a>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS, it
affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<div id="CollapsiblePanel8" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS,
it affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel8 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel8");
</script>