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/272">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" 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 drop-icon drop-closed-icon" data-toggle="dropdown">Summary</span>
                    <ul class="drop-closed" style="display: none;">
                        <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...

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.removeClass('expanded').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');
        });
    }
});