jquery - How to make p:panel collapsible by clicking on header? -

jquery - How to make p:panel collapsible by clicking on header? -

i'm using primefaces 3.4 collapsible panels. problem actual solution panel toggled via clicking in little button on right. not ergonomic , user expect toggling via clicking anywhere on header.

this want implement: trigger toggle via clicking on header , remove toggle button. i've written:

$('.ui-panel-titlebar').each(function(){ var header = $(this); var widgetid = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, ''); header.css('cursor', 'pointer'); var toggler = header.find('a[id$=_toggler]'); toggler.remove(); header.click(function(){ window[widgetid].toggle(); }); });

but don't solution, because first i'm guessing javascript widget id, , second, i'm removing rendered toggle button dom tree , prefer not rendered @ all.

is there way accomplish same effect in more elegant way without writing many code (so, without rewriting p:panel)? using extensions based on same licence primefaces (commerce-friendly) acceptable solution.

i had same problem , unfortunately not able find primefaces solution. wrote custom jquery script simulate click on toggle button if click on title bar.

$(document).on("click", ".ui-panel:has(.ui-panel-titlebar-icon) .ui-panel-titlebar", function(e) { console.log("click:"); if (e.srcelement != null) { // avoid infinite loop $(this).find("a.ui-panel-titlebar-icon").click(); } });

thanks on, works after ajax update. think should easy set behaviour panels given class (e.g. panel-header-click).

i tested code on chrome.

jquery primefaces toggle