CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapaccordion
code-8
code-8

Reputation: 58790

How do I force accordion to open up one at a time?

I have 2 accordions.

enter image description here

How do I force it to open up one at a time ?

HTML

<div id="course-summary-container">
    <!-- Append Course Summary Banner Here -->
    <div class="row" style="padding: 0px 60px;">
        <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel course-summary ">
                <div class="panel-heading panel-0" role="tab" id="heading-0"><span class="pull-left left"><div class="panel-title h1">Course Summary</div><div class="panel-title h2" id="course-name">Advanced 1: Common Core</div></span><span class="pull-right right show-score-0 " data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0"><div><img src="http://s6.postimg.org/ramwlv83h/report_blue.png" width="30"></div><a class="h3" role="button">VIEW REPORT</a></span><span class="pull-right right hide-score-0 hidden " data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="false" aria-controls="collapse0"><div><img src="http://s6.postimg.org/4kipvrikd/hidedetails_blue.png" width="30"></div><a class="h3" role="button">HIDE DETAILS</a></span>
                </div>
                <!-- End Panel Heading -->
                <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-0">
                    <div class="panel-body" id="course-summary-panel-body-0">
                        <!-- Append Score Details Here -->
                        <div class="row">
                            <div class="col-xs-7 col-sm-4 col-md-4 left"><span class="course-name">Chapter 1</span>
                            </div>
                            <div class="col-xs-3 col-sm-6 col-md-6 mid"><span class="date">08/24/2015</span>
                            </div>
                            <div class="col-xs-2 col-sm-2 col-md-2 pull-right right">
                                <div class="score">0%</div>
                                <div class="h5">SCORE</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="padding: 0px 60px;">
        <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel course-summary ">
                <div class="panel-heading panel-1" role="tab" id="heading-1"><span class="pull-left left"><div class="panel-title h1">Course Summary</div><div class="panel-title h2" id="course-name">Geometry: Common Core</div></span><span class="pull-right right show-score-1 " data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"><div><img src="http://s6.postimg.org/ramwlv83h/report_blue.png" width="30"></div><a class="h3" role="button">VIEW REPORT</a></span><span class="pull-right right hide-score-1 hidden " data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><div><img src="http://s6.postimg.org/4kipvrikd/hidedetails_blue.png" width="30"></div><a class="h3" role="button">HIDE DETAILS</a></span>
                </div>
                <!-- End Panel Heading -->
                <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
                    <div class="panel-body" id="course-summary-panel-body-1">
                        <!-- Append Score Details Here -->
                        <div class="row">
                            <div class="col-xs-7 col-sm-4 col-md-4 left"><span class="course-name">Chapter 1</span>
                            </div>
                            <div class="col-xs-3 col-sm-6 col-md-6 mid"><span class="date">08/24/2015</span>
                            </div>
                            <div class="col-xs-2 col-sm-2 col-md-2 pull-right right">
                                <div class="score">0%</div>
                                <div class="h5">SCORE</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS

$(function () {

    for (i = 0; i < 2; i++) {

        var $courseSummaryHeading = $('.course-summary .panel-heading.panel-' + i);
        var $showBtn = $('.show-score-' + i);
        var $hideBtn = $('.hide-score-' + i);

        $('#collapse' + i).on('show.bs.collapse', function () {
            $hideBtn.removeClass('hidden');
            $showBtn.addClass('hidden');
            $courseSummaryHeading.css({
                'border-bottom': '8px solid #273645'
            });
        });

        $('#collapse' + i).on('hide.bs.collapse', function () {
            $showBtn.removeClass('hidden');
            $hideBtn.addClass('hidden');
            $courseSummaryHeading.css({
                'border-bottom': '1px solid #273645'
            });
        });
    }





});

Fiddle

Upvotes: 1

Views: 729

Answers (2)

Ɛɔıs3
Ɛɔıs3

Reputation: 7851

You have to hide all the div which class is #collapse" + number".

Ok, following your example, you just have to hide all the divs when it is collapsed

$('#collapse' + i).on('show.bs.collapse', function () {
  $('#collapse').hide(); // Added here
  $hideBtn.removeClass('hidden');
  $showBtn.addClass('hidden');
  $courseSummaryHeading.css({
      'border-bottom': '8px solid #273645'
  });
});

Please see the jsfiddle updated

Upvotes: 0

PeterKA
PeterKA

Reputation: 24648

Collapse all before opening:

    $('#collapse' + i).on('show.bs.collapse', function () {
        $('[id^=collapse]').trigger('hide.bs.collapse'); //<<<<<----
        $hideBtn.removeClass('hidden');
        $showBtn.addClass('hidden');
        $courseSummaryHeading.css({
            'border-bottom': '8px solid #273645'
        });
    });

DEMO

Upvotes: 1

Related Questions