Nested Group Lists (Collapsable) with Links
<p>continuing from this post 
<a href="https://stackoverflow.com/a/33571268/4218990">https://stackoverflow.com/a/33571268/4218990</a></p>

<p>what would I have to modify to create links on the items? I've tried adding a div's instead of the a-Elements, but then the links aren't working.</p>

<h3>Original</h3>

<pre><code>  &lt;div class="list-group list-group-root well"&gt;
  &lt;a href="#item-1" class="list-group-item" data-toggle="collapse"&gt;
    &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1
  &lt;/a&gt;
  &lt;div class="list-group collapse" id="item-1"&gt;
    &lt;a href="#item-1-1" class="list-group-item" data-toggle="collapse"&gt;
      &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.1
    &lt;/a&gt;
    &lt;div class="list-group collapse" id="item-1-1"&gt;
      &lt;a href="#" class="list-group-item"&gt;Item 1.1.1&lt;/a&gt;
      &lt;a href="#" class="list-group-item"&gt;Item 1.1.2&lt;/a&gt;
      &lt;a href="#" class="list-group-item"&gt;Item 1.1.3&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<h3>with div's and links</h3>

<pre><code>  &lt;div class="list-group list-group-root well"&gt;
  &lt;div href="#item-1" class="list-group-item" data-toggle="collapse"&gt;
    &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;
    &lt;a href="www.someURL.de"&gt;Item 1&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="list-group collapse" id="item-1"&gt;
    &lt;div href="#item-1-1" class="list-group-item" data-toggle="collapse"&gt;
      &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;
      &lt;a href="www.someURL.de"&gt;Item 1.1&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="list-group collapse" id="item-1-1"&gt;
      &lt;div href="#" class="list-group-item"&gt;
       &lt;a href="www.someURL.de"&gt;Item 1.1.1&lt;/a&gt;
      &lt;/div&gt;
      &lt;div href="#" class="list-group-item"&gt;
       &lt;a href="www.someURL.de"&gt;Item 1.1.2&lt;/a&gt;
      &lt;/div&gt;
      &lt;div href="#" class="list-group-item"&gt;
       &lt;a href="www.someURL.de"&gt;Item 1.1.3&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>EDIT: strangely enough it works perfectly fine on the last level in JSFiddle <a href="https://jsfiddle.net/xjcobm3y/2/" rel="nofollow noreferrer">https://jsfiddle.net/xjcobm3y/2/</a></p>