Bootstrap Accordions - How to keep only 1 panel open when using a Dropdown?

Question

Couldn't find anything that addressed this exact issue; it seems simple enough but I haven't been able to get it to work.

Basically, I just want a normal accordion except that instead of a series of buttons to press to expand panels of text, I want the options to be selectable from a single dropdown. I already have that working, but now I can't figure out how to apply the data-parent attribute so only 1 panel is open at a time.

I've been looking at working normal accordion code and trying to apply the same concept to my dropdown, but the different structure means I can't just copy and paste the relevant code and I'm not sure of the fine details of how data-parent is meant to work with accordions.

This is what I have so far:

<div class="container">
  <div class="col-md-12">

    <div class="col-md-3"></div>

    <div class="panel-group col-md-6 text-center" id="accordion">

      <div class="col-md-12 text-center">

        <div class="dropdown btn-group">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
            <span class="caret"></span>
          </button>

          <ul class="dropdown-menu">
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
          </ul>
        </div>

      </div>

      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
        Text A
        </div>
      </div>

      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        Text B
        </div>
      </div>

      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
        Text C
        </div>
      </div>

    </div>
    <div class="col-md-3"></div>
  </div>
</div>

(I hope the divs are nested correctly... I think they are but it's hard to follow at times...)

As you can see, it's all inside of a div with an id of "accordion". The dropdown selections open and close the text sections below it properly, but even though I have their data-parent set to "#accordion", they don't close unless closed manually. I've tried putting data-parent in the text blocks' divs too but that didn't work either. It looks very similar to my normal working accordion but grouped differently, which it obviously has to be when I'm using a dropdown instead of separate buttons.

I assume it's probably a matter of reorganizing the divs a bit, or moving the id or data-parent around but I haven't been able to make any progress. Unless custom Javascript would be required to get this working? It seemed like quite a minor change to use a dropdown instead of a series of buttons, but maybe it's more complicated than it seems...

Answer 1

This is similar to my answer here: https://stackoverflow.com/a/19426220/171456

The accordion behavior depends on the panel class, and the panel must be the direct child of the data-parent element.

Applying these rules to your scenario would look like this...

<div class="panel-group row text-center">
            <div class="col-md-12 text-center" id="accordion">
                <div class="panel">
                    <div class="dropdown btn-group">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu">
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
                        </ul>
                    </div>

                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text A
                        </div>
                    </div>

                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text B
                        </div>
                    </div>

                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text C
                        </div>
                    </div>
                </div>
            </div>
        </div>

http://www.codeply.com/go/cPGVLuAh4j

On a separate note, in the Bootstrap grid col-* should always be the immediate child of a row.