title: Bootstrap 3 Collapse issue regarding height
body: <p>I've been struggling for a while with this - which I assume - small issue. I try to combine Bootstrap 3 list groups and the collapse plugin.</p>
  
  <p>I had a specific version working, but after some refactoring, it doesn't seem to collapse properly anymore, although I use the same 'strategy' as I did before. I just moved the <code>list-group-item</code> class from an achor tag to its parent div-tag. The problem is that it does not 'cover' my divs (and anchors) entirely.</p>
  
  <p>I was able to extract the crucial parts:</p>
  
  <pre><code>&lt;div class="list-group"&gt;
    &lt;a data-toggle="collapse" data-target=".list-things" class="list-group-item active"&gt;Things&lt;/a&gt;
    &lt;div class="list-group-item list-things in"&gt;
          &lt;a href="#"&gt;Foo&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="list-group-item list-things in"&gt;
          &lt;a href="#"&gt;Bar&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="list-group-item list-things in"&gt;
          &lt;a href="#"&gt;Baz&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>An important thing to keep in mind is that the <code>list-group</code> needs to have direct 'access' to its children annotated with <code>list-group-item</code>. Otherwise, each <code>list-group-item</code> will stand on its own having a 'double' border (<code>border-top</code> and <code>border-bottom</code>) because it's the <code>:first</code> and <code>:last</code> child; which makes it behave this way if you look this up in the Bootstrap CSS.</p>
  
  <p>Because a Bootply is way more handy than just reading some code, here's a link to it: <a href="http://www.bootply.com/115155" rel="nofollow">Bootply</a>. Maybe it's also useful to show what I originally had (only the crucial stuff as well): <a href="http://www.bootply.com/115165" rel="nofollow">Bootply original</a></p>
  
  <p>Anyone got an idea? Thanks in advance.</p>