<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="collapsibleList">
<li style="font-weight: bold">
<span>±</span><a href="someHref">Adult Mental Health and Learning Disability Services</a>
<ul class="list">
<li class="collapsibleList">
<span>±</span> <a href="someHref">Outpatient-Team</a>
<ul class="list2">
<li><span>±</span><a href="someHref">CPA</a></li>
<li><span>±</span><a href="someHref">Data Collection Validation</a></li>
<li class="collapsibleList">
<span>±</span> <a href="someHref">Contacts</a>
<ul class="list3">
<li class="collapsibleList">
<span>±</span><a href="someHref">DNA</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsibleList">
<span>±</span><a href="someHref">Inpatient-Ward</a>
<ul class="list2">
<li><span>±</span><a href="someHref">Bed Occupancy</a></li>
<li><span>±</span><a href="someHref">HCP Activity</a></li>
<li class="collapsibleList">
<span>±</span><a href="someHref">Referral-Discharges</a>
<ul class="list3">
<li class="collapsibleList">
<span>±</span><a href="someHref">Discharges</a>
<ul class="list4">
<li class="collapsibleList">
<span>±</span><a href="someHref">follow up</a>
<ul class="list5">
<li class="collapsibleList">
<span>±</span><a>Ex 5</a>
<ul class="list6">
<li class="collapsibleList">
<span>±</span><a>Ex 6</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>const CollapsibleLists = (function(){
// Makes all lists with the class 'collapsibleList' collapsible. The
// parameter is:
//
// doNotRecurse - true if sub-lists should not be made collapsible
function apply(doNotRecurse){
[].forEach.call(document.getElementsByTagName('ul'), node => {
if (node.classList.contains('collapsibleList')){
applyTo(node, true);
if (!doNotRecurse){
[].forEach.call(node.getElementsByTagName('ul'), subnode => {
subnode.classList.add('collapsibleList')
});
}
}
})
}
// Makes the specified list collapsible. The parameters are:
//
// node - the list element
// doNotRecurse - true if sub-lists should not be made collapsible
function applyTo(node, doNotRecurse){
[].forEach.call(node.getElementsByTagName('li'), li => {
if (!doNotRecurse || node === li.parentNode){
li.style.userSelect = 'none';
li.style.MozUserSelect = 'none';
li.style.msUserSelect = 'none';
li.style.WebkitUserSelect = 'none';
li.addEventListener('click', handleClick.bind(null, li));
toggle(li);
}
});
}
// Handles a click. The parameter is:
//
// node - the node for which clicks are being handled
function handleClick(node, e){
let li = e.target;
while (li.nodeName !== 'LI'){
li = li.parentNode;
}
if (li === node){
toggle(node);
}
}
// Opens or closes the unordered list elements directly within the
// specified node. The parameter is:
//
// node - the node containing the unordered list elements
function toggle(node){
const open = node.classList.contains('collapsibleListClosed');
const uls = node.getElementsByTagName('ul');
[].forEach.call(uls, ul => {
let li = ul;
while (li.nodeName !== 'LI'){
li = li.parentNode;
}
if (li === node){
ul.style.display = (open ? 'block' : 'none');
}
});
node.classList.remove('collapsibleListOpen');
node.classList.remove('collapsibleListClosed');
if (uls.length > 0){
node.classList.add('collapsibleList' + (open ? 'Open' : 'Closed'));
}
}
return {apply, applyTo};
})();
</script>
<script>CollapsibleLists.apply();</script>
