Prevent bootstrap parent also collapsing the a child collapse?

Question

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.

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 & child collapsible individually?

Parent:

 <button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter"> <button id='seemore-button' type='button' class='btn btn-block' data-toggle='collapse' data-target='#seemore'> </button> </button> 

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. http://www.bootply.com/UhUtCNMRb4

Answer 1

Solved it. http://www.bootply.com/S9CeJ5zFOn

 <div> <button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter"> <h3>Parent</h3> </button> <div id="smxs-filter" class="smxs-filter panel-collapse collapse"> <button id="seemore-button" type="button" class="btn btn-block" data-toggle="collapse" data-target="#seemore"> <h3>Child</h3> </button> </div> <div id="seemore" class="collapse"> yoyo </div> </div>