CODEWITHSUNDEEP
phptwitter-bootstrap-3accordion
user1547410
user1547410

Reputation: 893

bootstrap accordion have all collapsed by default

I am trying to do an accordion collapse/fold however i am not set on it being an according, standard collapse/fold is fine if the accordion effect is troublesome however i want it to show initially with all fields collapsed.

Bear in mind i am doing a loop to create each one, that might be irrelevant as i can add in a different id,class on the first loop no problem but just worth mentioning it.

So i have this:

<div class="row">
    <div class="panel-group" id="accordion">


        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Title1
                    </a>
                </h5>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Title2
                    </a>
                </h5>
            </div>
            <div id="collapse2" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        Title3
                    </a>
                </h5>
            </div>
            <div id="collapse3" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content3
                </div>
            </div>
        </div>
    </div>
</div>

Then i have the following script

<script>
$(function() {

var $active = true;

$('.panel-title > a').click(function(e) {
e.preventDefault();
});

$('.collapse-init').on('click', function() {
    if(!$active) {
       $active = true;
       $('.panel-title > a').attr('data-toggle', 'collapse');
       $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
       $(this).html('Click to disable accordion behavior');
    } else {
       $active = false;
       $('.panel-collapse.in').removeClass('in');
       $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
       $('.panel-title > a').removeAttr('data-toggle');
       $(this).html('Click to enable accordion behavior');
    }
});

        });
</script>

I have messed around with it in the chrome editor to try and edit the class from collapse to collapse in and vice versa on them all but nothing seems to force it to collapse them all. One always remains open.

Upvotes: 0

Views: 1086

Answers (1)

Harsh Makani
Harsh Makani

Reputation: 761

Just remove the in class from your <div id="collapse1" class="panel-collapse collapse in"> 

        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Title1
                    </a>
                </h5>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">
                    Content1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Title2
                    </a>
                </h5>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    Content2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        Title3
                    </a>
                </h5>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    Content3
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions