<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
style
>
body{
background-color:white;
}
.display{
background-color:red;
}
</
style
>
<
body
>
<
h2
style
=
"color:green;"
>GeeksforGeeks</
h2
>
<
div
class
=
"topics"
>
<
ol
>
<
li
><
a
href
=
"#"
><
b
>Searching</
b
></
a
>
<
ul
>
<
li
><
a
href
=
"#"
>Linear Search</
a
></
li
>
<
li
><
a
href
=
"#"
>Binary Search</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
><
b
>Sorting</
b
></
a
>
<
ul
>
<
li
><
a
href
=
"#"
>Bubble Sort</
a
></
li
>
<
li
><
a
href
=
"#"
>Merge Sort</
a
>
<
ul
>
<
li
><
a
href
=
"#"
><
i
>Recursive Merge Sort</
i
></
a
></
li
>
<
li
><
a
href
=
"#"
><
i
>Iterative Merge Sort</
i
></
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>Selection Sort</
a
></
li
>
<
li
><
a
href
=
"#"
>Insertion Sort</
a
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
><
b
>Tree</
b
></
a
>
<
ul
>
<
li
><
a
href
=
"#"
>Binary Tree</
a
></
li
>
<
li
><
a
href
=
" #"
>Binary Search Tree</
a
></
li
>
</
ul
>
</
li
>
</
ol
>
</
div
>
<
div
class
=
"display"
>
<
div
class
=
"syllabus"
>
<
a
href
=
"#"
>GeeksforGeeks / </
a
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$('.topics a').on('click', function() {
//selecting the syllabus class
$select = $('<
div
class
=
"syllabus"
></
div
>');
$(this).parents('li').each(function(n, li) {
//Adding / to each anchor tag of li
$select.prepend(' / ',$(li).children('a').clone());
});
// Displaying the hierarchical order of pages.
$('.display').html(
$select.prepend('<
a
href
=
"#syllabus"
>GeeksforGeeks</
a
>'));
})
</
script
>
</
body
>
</
html
>