(Sub)-categories affix stacked sidebar in Bootstrap - symfony

Question

I am trying to implement a navbar affix in Symfony2 with Bootstrap, but I have not managed to find any useful resources so far.
What I would like to do is having some Categories and SubCategories and when the user clicks on a Category, then the available SubCategories are popping up.
Initial state example:
+Category 1
+Category 2
+Category 3
+Category 4
After clicking on Category 1 link example:
+Category 1
-SubCategory 1
-SubCategory 2
-SubCategory 3
+Category 2
+Category 3
+Category 4
What I have so far is:
<div role="tabpanel" class="tab-pane" id="profile">
<div id="affix-nav" class="affix sidebar col-sm-3">
<ul class="nav sidenav" data-spy="affix">
{% for cat in categories %}
{% include 'ToolBundle:Default:sidebar_bit.html.twig' %}
{% endfor %}
</ul>
</div>
</div>
...and that is sidebar_bit.html.twig
<li>
{{ cat.getDefaultName }}
{% if no_subs is not defined %}
<ul class="nav">
{% for cat in cat.getChildren %}
{% include 'ToolBundle:Default:sidebar_bit.html.twig' with {'no_subs': true} %}
{% endfor %}
</ul>
{% endif %}
</li>
Thanks alot in advance and do not hesitate for additional info if is required.
UPDATE
Here is the jsfiddle: https://jsfiddle.net/0uwegh6k/2/

Answer 1

the fiddle example is messed up, but it looks like you have to add some js to make it work or you can use the boostrap 3 toggle link is here
How it works is like data-toggle="collapse" on the trigger and target it using href="collapseExample" or data-target="#collapseExample" as shown in the link above
<ul>
<li>
<a href="collapseExample" data-toggle="collapse" >Europe</a>
<ul class="nav" id="collapseExample">
<li>
England
</li>
<li>
Spain
</li>
</ul>
</li>
<ul>