JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<nav id="left">
<h3><a href="/wcms/3.0/modules/index.html">Gallery Home</a></h3>
<ul id="nav-primary">
	<li>
		<a href="/wcms/3.0/modules/demo/index.html">Sample Pages</a>
		<ul>
			<li>
				<a href="/wcms/3.0/modules/demo/featurehomepage.html">Home Page 1</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/demo/featurehomepage2.html">Home Page 2</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/options/samplecontentpage.html">Content Page 1</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/demo/samplecontentpage2.html">Content Page 2</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="/wcms/3.0/modules/flex/index.html">Modules - Flexible</a>
		<ul>
			<li>
				<a href="/wcms/3.0/modules/flex/block.html">Block List</a>
				<ul>
					<li>
						<a href="/wcms/3.0/modules/flex/block/headingemphasis.html">Heading Emphasis</a>
					</li>
					<li>
						<a href="/wcms/3.0/modules/flex/block/dropshadow.html">Dropshadow</a>
					</li>
					<li>
						<a href="/wcms/3.0/modules/flex/block/white.html">White Background</a>
					</li>
					<li>
						<a href="/wcms/3.0/modules/flex/block/light.html">Light Background</a>
					</li>
					<li>
						<a href="/wcms/3.0/modules/flex/block/dark.html">Dark Background</a>
					</li>
					<li>
						<a href="/wcms/3.0/modules/flex/block/gray.html">Gray Background</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="/wcms/3.0/modules/flex/bullet.html">Bulleted List</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/flex/ordered.html">Ordered List</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/flex/sub.html">Sub Sections</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/flex/text.html">Text Box/Single</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="/wcms/3.0/modules/spec/index.html">Modules - Specific Purpose</a>
		<ul>
			<li>
				<a href="/wcms/3.0/modules/spec/govd.html">Get Email Updates (GovDelivery)</a>
			</li>
			<li>
				<a href="/wcms/3.0/modules/spec/caption.html">Image with Caption</a>
			</li>
			<li>
				<a...

CSS

/* js enabled, hide all subs by default */
html.js nav#left ul li ul {
    display:none;
}

JavaScript

$('html').addClass("js");

var nav = $("nav#left"),
    currentLocationWoHash = location.hostname + location.pathname,
    documentArray = ["index.htm", "index.html", "default.html", "default.htm", "index.asp", "index.aspx", "default.asp", "default.aspx"],
    config = {
		parentUrl: "",
		showSiblings: true,
		showChildren: true,
		showFourthLevel: true,
		pageTitleTagId: "",
		match: false
	};


// JS is running, work on the nav
// if the nav exists, all the items are collapsed. 
// Add expanders to all the top level LI's and expand any that match the current url
if(nav.length) {
    var selector = nav.find('a[href]'),
        url = "";

    // if a parentUrl has been set in the configuration and it exists in the menu
    if(config.parentUrl) {    
        url = selector.filter(function() {
            return this.href.toLowerCase().indexOf(normalizedUrl(config.parentUrl)) > 0; 
        });
    }
    
    // parentUrl has not been located
    if(!url) {
        // look for the current location in the menu
        if(currentLocationWoHash) {
            url = selector.filter(function() { 
                return this.href.toLowerCase().indexOf(currentLocationWoHash) > 0; 
            });
        }
        
        // if the current location wasn't found in the menu
        if(!url) {
            // if the current location is in the document array
            // not sure the point of this
            url = $.inArray(currentLocationWoHash, documentArray);
		}
    }
    
    // if a matching URL was found
    if(url.length) {

    }
    else {

    }
}


var normalizedUrl = function (url) {
    // if (url === undefined) { return ""; }
    if(!url) { return ""; }
    
    url = url.replace(/.*?:\/\//g, "")
            .replace(location.hostname, "");

    if (location.port && location.port.length > 0 && location.port !== "80" && location.port !== "443") {
        url = url.replace(":" + location.port, "");
    }

    if (url.indexOf('Rhythmyx') >= 0) {
        url =...