Bootstrap 3 nested ULs collapse system (without JS/jQuery) - twitter-bootstrap-3

Question

I'm building something like a "treeview" on bootstrap3. But I'm struggling with the collapse system. There is no problem when I expand the parent. But when I try to expand a child, it expands it, but also collapse the parent. And so on...
Here is the html
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1
<ul class="collapse collapse1-1">
<li data-toggle="collapse" href=".collapse1-1-1">Item 1-1
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And here is a jsFiddle: https://jsfiddle.net/yL71kopn/
Can anyone help me on this? I would wish a purely bootstrap solution rather than a custom JS here. Unlees it's completely impossible.
Cheers! :)

Answer 1

Use links inside li tags, because when you click to open Item 1-1 you are also clicking on Item 1 li.
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li>
<a data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1</a>
<ul class="collapse collapse1-1">
<li>
<a data-toggle="collapse" href=".collapse1-1-1">Item 1-1</a>
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
JSFIDDLE