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="{{ route('ubuntustart') }}">Start</a>
</span>
</li>
<li id="multiCollapseExample2">
<span>
<a href="{{ route('ubuntuinit') }}">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>
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();
});
$("#multiCollapseExample1").click(function() {
$("#multiCollapseExample1, #multiCollapseExample2").show();
$("#multiCollapseExample1").addClass('active');
});
$("#git").click(function() {
localStorage.setItem('clickedItem', '#git');
$("#multiCollapseExample1, #multiCollapseExample2").hide();
$("#multiCollapseExample3, #multiCollapseExample4").show();
});
$("li span").click(function() {
$(this).addClass("active");
});
if(localStorage.getItem('clickedItem')) {
$(localStorage.getItem('clickedItem')).click()
}
});