Multiple bootstrap accordions with collapse other when clicked on one accordion

Question

I tried the following code and everything is fine except the FontAwesome icons. I tried to find some solution on Google, but I couldn't find the solution that I'm looking for.

When I click on one of the accordion the other accordion should be collapsed and the current clicked accordion should be open, and at the same time the fa icon should be changed depending on the accordion position.

Here is what I have tried so far JSFiddle

 $(document).ready(function () { $(".accordion-body").on("shown", function (evt) { setIcon(evt.target, true); }); $(".accordion-body").on("hidden", function (evt) { setIcon(evt.target, false); }); $(".accordion-body").collapse("hide"); $("#collapse-faq-1").collapse("show"); }); $('.accordion-toggle').click(function(event) { var id = '#'+ event.currentTarget.firstElementChild.id; if('class == fa-chevron-down'){ $(id).removeClass('fa-chevron-down'); $(id).addClass('fa-close'); }else{ $(id).removeClass('fa-close'); $(id).addClass('fa-chevron-down'); } }); $(function () { var active = true; $('#collapse-init').click(function () { if (active) { active = false; $('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle', ''); $(this).text('Enable accordion behavior'); } else { active = true; $('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle', 'collapse'); $(this).text('Disable accordion behavior'); } }); $('#accordion').on('show.bs.collapse', function () { if (active) $('#accordion .in').collapse('hide'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="accordion" id="accordion"> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1"> <i id="indicator-1" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-1" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2"> <i id="indicator-2" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-2" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-3"> <i id="indicator-3" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-3" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-4"> <i id="indicator-4" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-4" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-5"> <i id="indicator-5" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-5" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-6"> <i id="indicator-6" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-6" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg" id="heads"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-7"> <i id="indicator-7" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-7" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-8"> <i id="indicator-8" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-8" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> </div> 

Answer 1

First of all you didn't link the bootstrap.min.js file in your code. If you want to use bootstrap then you need to include its bootstrap.min.css file along with its bootstrap.min.js file to do all the stuff for you.

You need the following code to work as per on your requirement. By using not(this) it will gives you all the elements except the current clicked item. So that you can reset Fa Icons on all the other elements and apply specific Icon on your this element.

$('.accordion-toggle').click(function (event) {

    var $this = $(this);

    // It will reset all the other icons except the clicked item icon

    $('.accordion-toggle').not(this).children('i').removeClass('fa-close').addClass('fa-chevron-down');

    if ($this.children('i').hasClass('fa-chevron-down')) {

        $this.children('i').removeClass('fa-chevron-down').addClass('fa-close');

    } else {

        $this.children('i').removeClass('fa-close').addClass('fa-chevron-down');

    }
});

Here is working JSFiddle.

---

Below is the embedded snippet for your question.

 $(function () { $(document).ready(function () { $(".accordion-body").on("shown", function (evt) { setIcon(evt.target, true); }); $(".accordion-body").on("hidden", function (evt) { setIcon(evt.target, false); }); $(".accordion-body").collapse("hide"); $("#collapse-faq-1").collapse("show"); }); $('.accordion-toggle').click(function (event) { var $this = $(this); // It will reset all the icons except the clicked (this) item. $('.accordion-toggle').not(this).children('i').removeClass('fa-close').addClass('fa-chevron-down'); if ($this.children('i').hasClass('fa-chevron-down')) { $this.children('i').removeClass('fa-chevron-down').addClass('fa-close'); } else { $this.children('i').removeClass('fa-close').addClass('fa-chevron-down'); } }); $(function () { var active = true; $('#collapse-init').click(function () { if (active) { active = false; $('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle', ''); $(this).text('Enable accordion behavior'); } else { active = true; $('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle', 'collapse'); $(this).text('Disable accordion behavior'); } }); $('#accordion').on('show.bs.collapse', function () { if (active) $('#accordion .in').collapse('hide'); }); }); }); 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="accordion" id="accordion"> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1"> <i id="indicator-1" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-1" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2"> <i id="indicator-2" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-2" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-3"> <i id="indicator-3" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-3" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-4"> <i id="indicator-4" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-4" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-5"> <i id="indicator-5" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-5" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-6"> <i id="indicator-6" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-6" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg" id="heads"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-7"> <i id="indicator-7" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-7" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> <div class="accordion-group items"> <div class="accordion-heading WhiteBg"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-8"> <i id="indicator-8" class="fa fa-chevron-down pull-right"></i> Question </a> </div> <div id="collapse-faq-8" class="accordion-body collapse in"> <div class="accordion-inner"> <p> Inner content </p> </div> </div> </div> </div>