Icons, links, checkboxes in Expander header with single-click toggleMode?

[pquimbyParticipant]

I have the following requirements:
– implement an expanding/collapsing panel that expands/collapses when the user performs a single-click on the header of the expander
– place three additional controls within the expander header (an icon, a checkbox, and a hyperlink)

While I know how to place the other content into the header, when the user clicks the icon, checkbox, or link, the expander activates and either opens or closes (depending upon the state it was in prior to the control click).

I’ve seen other forum articles that state that my problem can be solved by implementing toggleMode = ‘dblclick’, but my requirements are to provide the expander functionality with a single-click.

Is there anyway to catch the events fired on the expander to allow it to disregard the click event if it was initiated by clicking one of the other controls? Or, if I’m not thinking in the correct direction, is there any other way that you are aware of to prevent the expander from reacting when one of the other controls is clicked?

Thanks,
Pam

[ivailoParticipant]

Hi pquimby,

We can offer you the following workaround:
When the user click at your widget in expander’s header – disable the expander and immediately enable it. This will prevent the default expand/collapse behavior.

Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[pquimbyParticipant]

Ivailo,

Aside from the momentary flash that occurs when the expander is disabled/enabled, this works fine.

Thanks for the workaround!
Pam

[Author]

Posts