Bootstrap accordion not working.

Question

Hi i am creating a webpage that has bootstrap accordions with plus-minus symbols. The object is to have the first accordion expanded when the page is loaded. And then can be collapsed when any other accordion is clicked. The problem I am facing is that when the other accordion is clicked, the symbol of default expanded accordion doesn't change. That is the accordion collapses, but the symbols remains same. Below is the screen shot of the issue.

Scenario 1:

Scenario 2:

Below is my html with script:

<script>
$(document).on('click', '.panel-title', function (e) {
    e.preventDefault();
    var $instance = $(this).find('.temp-plus');

    //var $accordions = $('.panel-title');
    //var $newInst = $(this).find('a');
    //$.each($accordions, function () {
    //    if ($newInst.hasClass('collapsed')) {
    //        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    //    }
    //});

    if ($instance.hasClass('glyphicon-plus')) {
        $instance.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } else {
        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }
});
</script>

<style type="text/css">

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

</style>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus temp-plus"></i>
                Input Contact Record
            </a>
        </h4>                                
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <h3>
                        Notes
                    </h3>
                    <div class="well well-sm">
                        <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                    </div>
                    <button type="button" class="btn btn-lg">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
    <br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Contact History
        </a>
    </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Notes List
        </a>
    </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>

I took the reference from here , it only has plus symbol and doesn't change symbol to minus when clicked on panel heading.

I am new to front end development and thus not sure if I am missing anything in my script or div's. Any help would be great.

Answer 1

I just recreated a combination between g your code as the boot snippet :

And the bellow code works well if i had understood your question

See beloow snippet :

 //triggerd on each panel when panel is collapsed and it's annimation is finished $('.panel-group').on('hidden.bs.collapse', toggleIcon); //triggerd on each panel when panel is opened and it's annimation is finished $('.panel-group').on('shown.bs.collapse', toggleIcon); // function called on both collpase/open for each panel : function toggleIcon(e) { var $a = $(e.target).prev(".panel-heading").find("a"); // this is to prevent change icon on multiple click without firing collapse/open if ($a.hasClass('collapsed')) { $a.find("i").removeClass('glyphicon-minus').addClass('glyphicon-plus'); } else { $a.find("i").removeClass('glyphicon-plus').addClass('glyphicon-minus'); } } 

 .panel-group .panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; } .panel-default>.panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE; } .panel-title { font-size: 14px; } .panel-title>a { display: block; padding: 15px; text-decoration: none; } .more-less { float: right; color: #212121; } .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: #EEEEEE; } .txt-area { margin: 10px; max-width: 1070px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container demo"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="more-less glyphicon glyphicon-minus"></i> Input Contact Record </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <h3> Notes </h3> <div class="well well-sm"> <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea> </div> <button type="button" class="btn btn-lg"> Confirm </button> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="more-less glyphicon glyphicon-plus"></i> Contact History </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Contact History </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="more-less glyphicon glyphicon-plus"></i> Notes List </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Notes List </div> </div> </div> </div><!-- panel-group --> </div><!-- container --> 

Answer 2

All fixed; Here's the code--

CSS:

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

Javascript:

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="more-less glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="more-less glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="row">
                  <div class="col-md-12">
                      <h3>
                          Notes
                      </h3>
                      <div class="well well-sm">
                          <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                      </div>
                      <button type="button" class="btn btn-lg">
                          Confirm
                      </button>
                  </div>
              </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

Working Fiddle here: https://jsfiddle.net/qpdv07vq/