JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="theMenu">
			<li>
				<h3 class="head"><a href="javascript:;">Title 1</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 1 1</a></li>
					<li><a href="index-multi.php">Content 1 2</a></li>
					<li><a href="index-multi.php">Content 1 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 2</a></h3>
				<ul>
					<li>
                    	<ul id="xtraMenu">
                        	<li>
                                <h4 class="head"><a href="javascript:;">Content xtra 2 1a</a></h4>
                                <ul>
                                    <li><a href="index-multi.php">Content 2 1 1</a></li>
                                    <li><a href="index-multi.php">Content 2 1 2</a></li>
                                    <li><a href="index-multi.php">Content 2 1 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <h4 class="head"><a href="javascript:;">Content xtra 2 1b</a></h4>
                                <ul>
                                    <li><a href="index-multi.php">Content 2 2 1</a></li>
                                    <li><a href="index-multi.php">Content 2 2 2</a></li>
                                    <li><a href="index-multi.php">Content 2 2 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
					<li><a href="index-multi.php">Content 2 2</a></li>
					<li><a href="index-multi.php">Content 2 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 3</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 3 1</a></li>
					<li><a href="index-multi.php">Content 3 2</a></li>
					<li><a href="index-multi.php">Content 3 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 4</a></h3>
				<ul>
					<li><a href="index-multi.php">Content...

JavaScript

jQuery().ready(function(){	
	// applying the settings
	jQuery('#theMenu').Accordion({
		active: 'h3.selected',
		header: 'h3.head',
		alwaysOpen: false,
		animated: true,
		showSpeed: 400,
		hideSpeed: 800
	});
	jQuery('#xtraMenu').Accordion({
		active: 'h4.selected',
		header: 'h4.head',
		alwaysOpen: false,
		animated: true,
		showSpeed: 400,
		hideSpeed: 800
	});
});