<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.energyblue.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqx-all.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxexpander.js"
></
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxExpander collapsing Event
</
h3
>
<
div
id
=
'jqxExp'
>
<
div
>GeeksforGeeks</
div
>
<
div
style
=
"text-align: justify;"
>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, ...
</
div
>
</
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$("#jqxExp").jqxExpander({
width: 250,
height: 150
});
$('#jqxExp').on('collapsing', function () {
alert("Expander Collapsing");
})
});
</
script
>
</
body
>
</
html
>