JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<!-- Listeneintrag 1 -->
<li>
<!-- Link zum Anzeigen der benachbarten Liste -->
<a href="#sublist1">das ist ein test</a>
<!-- Untergeordnete Liste -->
<ul id="sublist1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<!-- Listeneintrag 2 -->
<li>
<!-- Link zum Anzeigen der benachbarten Liste -->
<a href="#sublist2">Kategorie 2</a>
<!-- Untergeordnete Liste -->
<ul id="sublist2">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
</ul>
CSS
ul ul {
position: absolute;
left: -9999px;
}
ul:target,
ul.visible {
position: static;
left: auto;
}
a {text-decoration: none;}
JavaScript
/** Demo: JavaScript Killswitch */
var js = true;
if (!js) return;
/** Das eigentliche Script */
$(document).ready(function() {
/** href-Attribute leeren */
$('li a').attr('href', '');
/** Auf das Klickereignis reagieren */
$('li a').on('click', function(e) {
e.preventDefault();
$(this).next('ul').toggleClass('visible');
});
});