JSFiddle - React, Tailwind, and code Playground
HTML
<ol class="treeRoot"><li class="is-parent is-collapsed">
<a>Lorem ipsum dolor sit amet</a>
<ol><li>
<a>consetetur sadipscing elitr</a>
</li><li class="is-parent is-collapsed">
<a>sed diam nonumy eirmod tempor invidunt ut</a>
<ol><li class="is-parent is-collapsed">
<a>labore et dolore magna aliquyam erat, sed diam voluptua</a>
<ol><li>
<a>At vero eos et accusam et justo duo dolores</a>
</li><li class="is-parent is-collapsed is-last-child">
<a>et ea rebum. Stet clita kasd gubergren</a>
<ol><li>
<a>no sea takimata sanctus est</a>
</li><li class="is-last-child">
<a>Lorem ipsum dolor sit amet</a>
</li></ol>
</li></ol>
</li><li class="is-last-child">
<a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a>
</li></ol>
</li><li>
<a>sed diam nonumy eirmod tempor</a>
</li><li>
<a>A 4 Heimatsparkassengrundsätze</a>
</li><li>
<a>invidunt ut labore et dolore magna aliquyam erat</a>
</li><li>
<a>sed diam voluptua</a>
</li><li class="is-last-child">
<a>At vero eos et accusam et justo</a>
</li></ol>
</li><li class="is-parent is-collapsed">
<a>duo dolores et ea rebum</a>
<ol><li class="is-last-child">
<a>Stet clita kasd gubergren</a>
</li></ol>
</li><li class="is-last-child">
<a>no sea takimata sanctus est Lorem ipsum dolor sit amet</a>
</li></ol>
CSS
.treeRoot ol,
.treeRoot {
padding: 0;
margin: 0;
list-style: none;
line-height: 16px;
background-color: #a6c2bb;
}
.treeRoot {
border: 1px solid #a6c2bb;
}
.treeRoot ol {
background: #f1f1f1;
display: none;
padding-bottom: 15px;
}
.treeRoot li {
position: relative;
-webkit-transition: background .2s ease;
-moz-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
}
.treeRoot li.is-expanded > a,
.treeRoot a:hover {
font-weight: bold;
}
.treeRoot a:hover {
color: #385b50;
}
.treeRoot li:hover {
background-color: #ccc;
}
.treeRoot li.is-expanded {
background: #fff;
}
.treeRoot li > a {
padding: 3px 0;
cursor: pointer;
position: relative;
display: block;
font-weight: normal;
color: #000;
text-decoration: none;
}
.treeRoot li.is-parent > a {
background: url(img/Navigation/minus.png) no-repeat 0 7px;
padding-left: 15px;
}
.treeRoot li.is-parent.is-collapsed > a {
background-image: url(img/Navigation/plus.png);
}
.treeRoot li.is-parent.is-collapsed > a:after {
display: none;
}
.treeRoot li.is-parent > a:after {
content: "";
position: absolute;
top: 20px;
bottom: -11px;
left: 4px;
border-left: 1px dotted #000;
}
.treeRoot li li:after {
content: "";
position: absolute;
top: 11px;
bottom: -10px;
width: 16px;
border-left: 1px dotted #000;
border-top: 1px dotted #000;
}
.treeRoot li li.is-last-child:after {
bottom: auto;
height: 0;
}
.treeRoot > li.is-parent > a:after {
left: 14px;
}
.treeRoot > li {
border: 1px solid #fff;
background: #f1f1f1;
margin-top: 1px;
}
.treeRoot > li:first-child {
margin-top: 0;
}
.treeRoot > li > a {
padding: 5px 10px;
border-top: 0;
display: block;
margin: 0;
}
.treeRoot > li.is-parent > a {
background-position: 10px 8px;
padding-left: 25px;
}
.treeRoot li li > a {
...
JavaScript
$('a').on('click', function (e) {
$(this).parent().toggleClass('is-collapsed').toggleClass('is-expanded');
$(this).next().slideToggle();
});