"Untitled"
Bootstrap 4.1.1 Snippet by karim111

<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(); });

Related: See More


Questions / Comments: