collapse
Triggered when an item of a PanelBar is collapsed.
Event Data
e.item Element
The collapsing item of the PanelBar.
Example
<ul id="panelbar"> <li>Item 1 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> <li>Item 2 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> </ul> <script> $("#panelbar").kendoPanelBar({ collapse: function(e) { console.log("Collapsed item:", e.item); } }); </script>Attach collapse event handler during initialization; detach via unbind()
<ul id="panelbar"> <li>Item 1 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> <li>Item 2 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> </ul> <script> // event handler for collapse var onCollapse = function(e) { // access the collapsed item via e.item (HTMLElement) // detach collapse event handler via unbind() panelBar.data("kendoPanelBar").unbind("collapse", onCollapse); }; // attach collapse event handler during initialization var panelBar = $("#panelbar").kendoPanelBar({ collapse: onCollapse }); </script>Attach collapse event handler via bind(); detach via unbind()
<ul id="panelbar"> <li>Item 1 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> <li>Item 2 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> <li>Sub Item 3</li> </ul> </li> </ul> <script> $("#panelbar").kendoPanelBar(); // event handler for collapse var onCollapse = function(e) { // access the collapsed item via e.item (HTMLElement) // detach collapse event handler via unbind() $("#panelbar").data("kendoPanelBar").unbind("collapse", onCollapse); }; // attach collapse event handler via bind() $("#panelbar").data("kendoPanelBar").bind("collapse", onCollapse); </script>In this article