JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<section id="block-book-menus-navigation" class="block block-book-menus contextual-links-region clearfix">

    <h2 class="block-title">Contents</h2>
    <div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger toc-filter-processed" href="#">Configure</a>
        <ul class="contextual-links">
            <li class="block-configure first last"><a href="/maps.dev-box.com.au/admin/structure/block/manage/book_menus/navigation/configure?destination=node/261">Configure block</a></li>
        </ul>
    </div>
    <ul class="menu nav">
        <li class="first last expanded"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Senators_and_Members_Entitlements" data-target="#" class="dropdown-toggle active" data-toggle="dropdown">Senators and Members' Entitlements</a>
            <ul>
                <li class="first leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Whats_New">What's New</a>
				<ul>
                        <li class="first leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Entitlements_Summary_-_Accommodation_Office_Facilities">Accommodation and Office Facilities </a></li>
                        <li class="leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Entitlements_Summary_-_Employees">Employees</a></li>
                        <li class="leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Entitlements_Summary_-_Family_Travel">Family Travel</a></li>
                        <li class="leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Entitlements_Summary_-_Other_Matters">Other matters</a></li>
                        <li class="leaf"><a href="/maps.dev-box.com.au/entitlements_handbooks/senators-and-members/Entitlements_Summary_-_Salary">Salary</a></li>
                        <li class="last leaf"><a...

CSS

ul li {
    list-style: none;
    font-family: verdana;
}

.block-book-menus .menu li a,
.block-book-menus .menu li span {
    position: relative;
    display: inline-block;
    padding: 7px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.block-book-menus .menu li a:hover,
.block-book-menus .menu li span:hover {
    background-color: #eeeeee;
}

.block-book-menus .menu li a.active {
    font-weight: bold;
}

.block-book-menus .menu li ul {
    margin-left: 14px;
}

.block-book-menus .menu li ul {
    margin-left: 28px;
}

.drop-icon:before {
    display: inline-block;
    width: 1em;
	text-align: center;
    content: '-';
}

.drop-closed-icon:before {
    content: '+';
}

JavaScript

$("#block-book-menus-navigation .menu li ul li").each(function() {

    // Target the first child of the list item then get the following.
    // child list if there is one.
    var $this = $(this).children('*:first-child'),
        $child = $this.next('ul'),
		isLink = false;
	
	// Check if the item is a link
	if ($this.is('a')) {
		isLink = true;
	}

     // If there are children...
	if ($child.length) {

	    // Hide all children on load
	    $child.addClass('drop-closed').hide();
	    
	    // Prefix items containing children with a symbol.
		if (isLink == false) {
			// If it's not a link, just add a class
			$this.addClass('drop-icon drop-closed-icon');
		} else {
			// Otherwise, switch $this to be the expand/collapse icon,as users
			// can't select the main link without navigating away from the page
			$this.before('<span class="drop-icon drop-closed-icon"></span>');
			$this = $this.prev('span.drop-icon');
		}
		
	    // Bind the click event to each list parent item
		$this.on('click touch', function() {
			$this.toggleClass('drop-closed-icon');
			$child.slideToggle('fast');
		});
    }
});