<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Blaze UI</
title
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
ul, #myUL {
list-style-type: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.nested {
display: none;
}
.active {
display: block;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"o-container o-container--medium"
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
h2
>Blaze UI Trees Expandable and Expanded</
h2
>
<
div
role
=
"tree"
id
=
"myUL"
class
=
"c-tree"
>
<
button
role
=
"treeitem"
aria-expanded
=
"false"
class
=
"c-tree__item caret"
>Courses</
button
>
<
ul
class
=
"nested"
>
<
button
role
=
"treeitem"
aria-expanded
=
"false"
class
=
"c-tree__item caret"
>Self Paced</
button
>
<
ul
class
=
"nested"
>
<
span
role
=
"treeitem"
class
=
"c-tree__item"
>
DSA Self Paced
</
span
>
<
span
role
=
"treeitem"
class
=
"c-tree__item"
>
SDE Theory
</
span
>
</
ul
>
</
ul
>
</
li
>
<
button
role
=
"treeitem"
aria-expanded
=
"false"
class
=
"c-tree__item caret"
>Tutorials</
button
>
<
button
role
=
"treeitem"
aria-expanded
=
"false"
class
=
"c-tree__item caret"
>Articles</
button
>
</
div
>
<
script
>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i <
toggler.length
; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested")
.classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</
div
>
</
body
>
</
html
>