CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3accordion
mellis481
mellis481

Reputation: 4168

Bootstrap accordion only auto-collapsing one panel

I've been scratching my head on this for the past 2 hours. I have an accordion with two panels. I want the first panel to be expanded by default. When the collapsed panel's header is clicked, I want that panel to expand and the other to collapse. It only works in certain situations for the second panel.

Here is a JSFiddle.

Here is my markup:

<div id="proposalAccordian" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseContact">Contact</a>
            </h4>
        </div>
        <div id="collapseContact" class="panel-collapse collapse in">
            <div class="panel-body">
                @Html.Partial("_ContactPanel")
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal">Proposal</a>
            </h4>
        </div>
        <div id="collapseProposal" class="panel-collapse collapse">
            <div class="panel-body">
                @Html.Partial("_ProposalPanel")
            </div>
        </div>
    </div>
</div>

I'm using Bootstrap v3.1.1 and jQuery v1.10.4.

Upvotes: 4

Views: 15940

Answers (4)

Husain Al Faraj
Husain Al Faraj

Reputation: 141

Try this

var $collapse = $('.collapse');
$collapse.collapse().on('show.bs.collapse', function() {
    $collapse.collapse('hide');
});

Upvotes: 0

Ravi Teja Tata
Ravi Teja Tata

Reputation: 1

<div id="accordion" role="tablist" aria-multiselectable="true">
    All panels inside this..
</div>

In our case, the problem was in HTML structure, as we had inside foreach loop. The fix is to use a single accordion for all the panels.

Upvotes: 0

isherwood
isherwood

Reputation: 61114

Strangely, your code works on jQuery 1.9.x:

http://jsfiddle.net/isherwood/MMxMn/5

and 1.11.x:

http://jsfiddle.net/isherwood/MMxMn/4

but not 1.10.x:

http://jsfiddle.net/isherwood/MMxMn/8

Note that I've normalized the spelling of "accordion" to fix the accordion functionality.

Upvotes: 0

Panoply
Panoply

Reputation: 433

You need to add data-parent="#proposalAccordian"

<a data-toggle="collapse" data-parent="#proposalAccordian"  href="#collapseProposal">Proposal</a>

See fiddle: http://jsfiddle.net/nicos/JKqGc/

Upvotes: 11

Related Questions