JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<aside id="sidebar" class="col-12 col-lg-4 col-xxl-3">
<div class="just-padding">
<ul>
<li id="server">
<a href="#">Server</a>
</li>
<ul>
<li id="multiCollapseExample1">
<span>
<a href="#">Start</a>
</span>
</li>
<li id="multiCollapseExample2">
<span>
<a href="#">Security</a>
</span>
</li>
</ul>
<li id="git">
<a href="#">GIT</a>
</li>
<ul>
<li id="multiCollapseExample3">
<span>
<a href="#1">blub</a>
</span>
</li>
<li id="multiCollapseExample4">
<span>
<a href="#2">wurst</a>
</span>
</li>
</ul>
</ul>
</div>
</aside>
CSS
.active {
color: red;
list-style-type: disc;
}
.active span {
color: black;
}
JavaScript
$(document).ready(function () {
$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();
$("#server").click(function() {
localStorage.setItem('clickedItem', '#server');
$("#multiCollapseExample3, #multiCollapseExample4").hide();
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
$("#git").click(function() {
localStorage.setItem('clickedItem', '#git');
$("#multiCollapseExample1, #multiCollapseExample2").hide();
$("#multiCollapseExample3, #multiCollapseExample4").show();
});
$("#multiCollapseExample1").click(function() {
localStorage.setItem('clickedSub', '#multiCollapseExample1');
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
$("#multiCollapseExample2").click(function() {
localStorage.setItem('clickedSub', '#multiCollapseExample2');
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
if(localStorage.getItem('clickedSub')) {
var test = $(localStorage.getItem('clickedSub')).click()
$(test).addClass("active");
};
if(localStorage.getItem('clickedItem')) {
$(localStorage.getItem('clickedItem')).click()
$(this).addClass("active");
};
});