<!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 showArrowAt() Method
</
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
>
<
input
type
=
"button"
style
=
"margin: 29px;"
id
=
"jqxbutton_for_showArrowAt"
value
=
"Show arrow for the 0th item"
/>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#jqx_Navigation_Bar").
jqxNavigationBar({
width: 290,
height: 150,
});
$("#jqxbutton_for_showArrowAt").
jqxButton({
width: 280,
});
$('#jqx_Navigation_Bar').jqxNavigationBar(
'hideArrowAt', 0);
$('#jqxbutton_for_showArrowAt').
on('click', function () {
var Item_Index = 0;
$('#jqx_Navigation_Bar').
jqxNavigationBar(
'showArrowAt',
Item_Index);
});
});
</
script
>
</
center
>
</
body
>
</
html
>