<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 ---------->
<div class="leftmenu">
<ul>
<li>Adult Mental Health and Learning Disability Services
<ul>
<li><a href="someHref">CPA</a></li>
<li><a href="someHref">Bed Occupancy</a></li>
<li><a href="someHref">Wait time</a></li>
</ul>
</li>
<li>Adult community mental health services
<ul>
<li><a href="someHref">Admin-Billing</a></li>
<li>Admin-progress notes
<ul>
<li><a href="listCollapseExample.html">Ex 1</a></li>
<li><a href="someHref">Ex 2</a></li>
</ul>
</li>
<li><a href="javascript:notA();">Admin-mail merge</a></li>
</ul>
</li>
<li>Older Adults Mental Health Services
<ul>
<li><a href="someHref">Diagnosis</a></li>
</ul>
</li>
<li>Corporate Services
<ul>
<li><a href="someHref">CQUIN</a></li>
</ul>
<li>Children and Young People Services
<ul>
<li><a href="someHref">HCP Caseload</a></li>
</ul>
<li>Outcomes
<ul>
<li><a href="someHref">Assessment</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
a {
color: #0072CE;
text-decoration: none;
}
.leftmenu li {
margin-left: -20px;
list-style-type: none;
padding: 5px 0;
}
// Execute this after the site is loaded.
$(function() {
// Find list items representing folders and
// style them accordingly. Also, turn them
// into links that can expand/collapse the
// tree leaf.
$('li > ul').each(function(i) {
// Find this list's parent list item.
var parentLi = $(this).parent('li');
// Style the list item as folder.
parentLi.addClass('folder');
// Temporarily remove the list from the
// parent list item, wrap the remaining
// text in an anchor, then reattach it.
var subUl = $(this).remove();
parentLi.wrapInner('<a/>').find('a').click(function() {
// Make the anchor toggle the leaf display.
subUl.toggle();
});
parentLi.append(subUl);
});
// Hide all lists except the outermost.
$('ul ul').hide();
});
