Twitter bootstrap : collapsible element in collapsible element

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;}