Question

I`m playing with bootstrap collapse. But i where wondering if there is a way, to make the bootstrap collapse also working in two rows. I tried severall things, but none seem to work for me yet.

Below is one thing i tried, but this doesn’t seem to work. When opening the one accordian tab, the other won’t collapse no matter what i try…

Anyone idea’s or suggestions on how to solve this?

<div class="row-fluid">
    <div class="accordion" id="accordion2">

        <div class="span6">

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>

        </div>

        <div class="span6">

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>

        </div>

    </div>
</div>

Answer 1

I finally found the solution for multiple column bootstrap collapse. I’ll created a working fiddle, for if someone else is ever asking the same question.

<div class="row-fluid" id="accordion2" >

    <div class="span6" id="accordion2">

        <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    collapse 1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                    collapse item 1
              </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                    collapse 2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                    collapse item 2
              </div>
            </div>
        </div>

    </div>

    <div class="span6" id="accordion2">

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                    Collapse 3
                </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                    Collapse item 3
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                    Collapse 4
                </a>
            </div>
            <div id="collapseFour" class="accordion-body collapse">
                <div class="accordion-inner">
                    Collapse item 4
                </div>
            </div>
        </div>

    </div>

</div>