JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div class="side-bar">
	<ul>
		<li><a href="#hide1" class="hide" id="hide1">+ Menu 1</a>
    <a href="#show1" class="show" id="show1">- Menu 1</a></li>
		<div class="list">
            <ul class="sub-side-bar">
			<li><a href="#">Menu 1.1</a></li>
			<li><a href="#">Menu 1.2</a></li>
			<li><a href="#">Menu 1.3</a></li>
		</ul>
        </div>
		<li><a href="#hide2" class="hide" id="hide2">+ Menu 2</a>
    <a href="#show2" class="show" id="show2">- Menu 2</a></li>
		<div class="list">
            <ul class="sub-side-bar">
                <li><a href="#">Menu 2.1</a></li>
                <li><a href="#">Menu 2.2</a></li>
            </ul>
        </div>
		<li><a href="#hide3" class="hide" id="hide3">+ Menu 3</a>
    <a href="#show3" class="show" id="show3">- Menu 3</a></li>
		<li><a href="#hide4" class="hide" id="hide4">+ Menu 4</a>
    <a href="#show4" class="show" id="show4">- Menu 4</a></li>
	</ul>
</div>

CSS

.list {
    display:none; 
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

.side-bar {
	background-color: #222222;
	position: relative;
	width: 160px;
	height: 500px;
	top: 20px;
	left: 20px;
}
.side-bar ul {
	margin: 0px;
	padding: 0px;
}
.side-bar ul li {
	list-style: none;
	padding: 5px 0px;
}
.button {
	margin: 0px 10px;
}
.side-bar ul li a {
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	width: 100%;
	height: 100%;
}
.sub-side-bar li {
	text-align: center !important;
	background-color: #444444;
}