"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 ----------> <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>

Related: See More


Questions / Comments: