const CLASSNAME_EXPANDED = "bi bi-chevron-down";
const CLASSNAME_COLLAPSED = "bi bi-chevron-up";

window["makeTree"] = function (ulRoot) {
	let makeTree = (li) => {
		let button = li.children[0];
		let list = li.children[1];
		if (button && list && button.nodeName == 'SPAN' && list.nodeName == 'UL') {
			button.className = CLASSNAME_COLLAPSED;
			list.style.display = 'block';
			button.addEventListener("click", (e) => {
				let visible = list.style.display === 'block';
				if (visible) {
					button.className = CLASSNAME_EXPANDED;
					list.style.display = "none";
				} else {
					button.className = CLASSNAME_COLLAPSED;
					list.style.display = "block";
				}
			});

			for (var i = 0; i < list.children.length; ++i)
				makeTree(list.children[i]);
		}
	};
	for (var i = 0; i < ulRoot.children.length; ++i)
		makeTree(ulRoot.children[i]);
}