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></li>
                <li class="expanded"><span data-target="#" class="dropdown-toggle nolink" data-toggle="dropdown">Summary</span>
                    <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...

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

JavaScript

var $title = $('#block-book-menus-navigation .menu > li > a:first-child'),
	counter = 0;

// Disable all links
$('a').removeAttr('href');

$title.next('ul').children('li').each(function() {
	
	var $this = $(this).children('*:first-child'),
		$child = $this.next('ul');
	
	counter++	
	console.log('level1 nav item ' + counter + ' found');

	$this.on('click', function() {
		console.log('clicked');
		//$child.slideToggle();
	});
});