title: Prevent bootstrap parent also collapsing the a child collapse?
body: <p>At the moment, I have two buttons. The parent button when clicked displays stuff and a part of that stuff is another button which too can be clicked to uncollapse.</p>
  
  <p>I want the child to be closed when the parent is opened, however I assume there is a conflict and the child is opening due to the parent.
  Is there any way I can address both the parent &amp; child collapsible individually?</p>
  
  <p>Parent:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter"&gt;
  
  &lt;button id='seemore-button' type='button' class='btn btn-block' data-toggle='collapse' data-target='#seemore'&gt;
  &lt;/button&gt;
  
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT:
  Here is an example of the issue I have.
  I require the secondary collapsible to be CLOSED when the parent is opened so that "yoyo" does not show.
  <a href="http://www.bootply.com/UhUtCNMRb4" rel="nofollow">http://www.bootply.com/UhUtCNMRb4</a></p>