<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxexpander.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxnavigationbar.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxNavigationBar collapsedItem Event
</
h3
>
<
div
id
=
"jqx_Navigation_Bar"
style
=
"margin: 25px;"
align
=
"left"
>
<
div
>First Header</
div
>
<
div
>
<
h8
>Content for the first header</
h8
>
<
ul
>
<
li
>GFG</
li
>
<
li
>CSE</
li
>
</
ul
>
</
div
>
<
div
> Second Header</
div
>
<
div
>
<
h8
>Content for the second header</
h8
>
<
ul
>
<
li
>GeeksforGeeks</
li
>
<
li
>CSE</
li
>
</
ul
>
</
div
>
</
div
>
<
div
id
=
"log"
></
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#jqx_Navigation_Bar").
jqxNavigationBar({
width: 250,
height: 132
});
$('#jqx_Navigation_Bar').
on('collapsedItem', function (event) {
var Collapsed_Item = event.args.item;
$("#log").html(JSON.stringify(
"The index of the collapsed item is: "
+ Collapsed_Item))
});
});
</
script
>
</
center
>
</
body
>
</
html
>