Twitter bootstrap : collapsible element in collapsible element - twitter-bootstrap-3

Question

Disclaimers first :
1) First question ever, I hope I'm doing this right, apologies if it's not the case.
2) English is not my native language, so sorry for any mistakes.
3) Made a search and couldn't find an answer.
Trying to explain in words will mean many words while a bootply can say it all :
http://www.bootply.com/EBIMFQ5jEC
Basically, what I want is almost working except for this : I would like that clicking on "title 3" for instance (after you've clicked on "title 1" or "title 2") hides the "first/second column(s)" so that the "third column" is the only one shown (and vice-versa of course). I hope this is clear.
I tried a few things with data-parent (such as this: http://www.bootply.com/pgoT2IPG8D which has data-parent="#collapse1" added for the first three buttons) but couldn't achieve anything...
Thanks in advance for any help !

Answer 1

To get what you want you will indeed have to set the `data-parent', but also notice that this also require a '.panel' class. From the docs:
If a selector is provided, then all collapsible elements under the
specified parent will be closed when this collapsible item is shown.
(similar to traditional accordion behavior - this is dependent on the
panel class)
demo: http://www.bootply.com/qhs4dQbFZK
So you should wrap you collapsible item in a .panel class (or change the plugin). See also: https://github.com/twbs/bootstrap/issues/15341
Then a collapsible item will look that shown below:
<div class="panel">
<div class="col-md-2 collapse" id="collapse1">
<div class="btn-group-vertical btn-block" data-toggle="buttons">
<button class="btn btn-default btn-lg" href="">First subtitle column</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button>
</div>
</div>
</div>
Your button should get a data-parent attribute:
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button>
And your items should be wrapped inside the id set before (#menurow):
<div class="row" id="menurow"></div>
Notice that the .panel class also set some style rules, which should be overrules (undo) for your situation, for instance: .panel {margin-bottom: 0;}