Spry Collapsible Panel

When using the spry collapsible panel, how can I divide the
top Tab div into two columns, so the content in the right half of
the Tab div does not control the spry drop down effect. (The left
side of the Tab div would thus control the drop down effect.)





Thanks, :)Spry Collapsible Panel
The only way to do that would be to put an onclick handler on
the top-level element of the right side which cancels the bubble up
of the click. Something like:



%26lt;div class=''CollapsiblePanelTab''%26gt;

%26lt;div class=''leftHalf''%26gt;%26lt;/div%26gt;

%26lt;div class=''rightHalf'' onclick=''return
false''%26gt;%26lt;/div%26gt;

%26lt;/div%26gt;



--== Kin ==--Spry Collapsible Panel
Hi Kin,



That didn't seem to work, any other suggestions?
Apparently returning false from an on* attribute only cancels
the ''default action'', so you're going to have to register an event
listener and cancel both the default action and the bubbling of the
event:





%26lt;script src=''includes/SpryDOMUtils.js''
type=''text/javascript''%26gt;%26lt;/script%26gt;



...



%26lt;script type=''text/javascript''%26gt;

%26lt;!--

var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel(''CollapsiblePanel1'');



// Register an event listener on the element inside the panel
tab that we want to

// click on but not trigger the panel to open and close. The
event listener simply

// returns false to prevent the default action *and* bubbling
of the event.



Spry.$$(''.CollapsiblePanelTab
.rightHalf'').addEventListener(''click'', function(e) { return false;
}, false);

//--%26gt;

%26lt;/script%26gt;





--== Kin ==--