Checkbox (only) controls open/close function of collapsible panel

Question

I have a form with several collapsible panels in it, each
with a checkbox in the tab area, like so:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">
<input type="checkbox" name="checkbox_array[]"
value="i_need_this" />
I need this!
</div>
<div
class="CollapsiblePanelContent">Content</div>
</div>
My question is this: Is there any way to control the
open/close function of the collapsible panel using only the
checkbox located within the tab? Ideally, the panel would still
change based on hover, focus, etc.
In advance, let me just say thank you so much for any help
you might provide with this.
- Devin

Answer 1

Yessir, it is possible. I was struggling with something
similar myself, and got it figured out. You'll need to do this in
two steps.
First, you should disable the existing listener, so that when
you click the tab area nothing happens. You'll need to wade into
your SpryCollapsiblePanel.js file and comment out a line. Somewhere
around line 191 you'll find a function called
"Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers".
Within that function, around line 198, you'll find the following
code:
quote:
Spry.Widget.CollapsiblePanel.addEventListener(tab, "click",
function(e) { return self.onTabClick(); }, false);
Comment it out by typing a double forward slash (//) at the
beginning of the line like this:
quote:
// Spry.Widget.CollapsiblePanel.addEventListener(tab,
"click", function(e) { return self.onTabClick(); }, false);
If you test your code at this point, you'll discover that
you've broken the collapsible panel functionality. The panel won't
open. Now you need to set up your checkbox to trigger the
open/close functions. To do this, you just need to add an onclick
event to your checkbox like this:
quote:
<input type="checkbox" name="checkbox_array[]"
value="i_need_this"
onclick="CollapsiblePanel1.onTabClick();" />
The onTabClick() function simply checks if the panel is
already open, and calls either the open() or close() function as
appropriate. If you needed to, you could check whether the checkbox
is checked or not, then call the open() or close() functions
directly.
Please note that in modifying your SpryCollapsiblePanel.js
file like this, you'll be modifying the behavior of all collapsible
panels built using that file. If you need standard collapsible
panels as well, you'll need to add the same onclick event to your
tab panels manually.