Display an icon when open and another when closed (jQuery Bootstrap)

Question

I need the following, when the page is loaded must show one open accordion with minus icon, and when closed the plus icon should change.

Here's an example in fiddle

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-plus")
                         .removeClass("icon-plus")
                         .addClass("icon-minus");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-minus")
                         .removeClass("icon-minus")
                         .addClass("icon-plus");
});

How to make to display open accordion with default icon minus?

possible duplicate of [Bootstrap 3 Collapse show state with Chevron icon](http://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon) — KyleMit, Jul 22 '14 at 20:50

score 2 · Answer 1 · edited May 23 '17 at 11:50

There are much easier ways to do this than the current answers. You can do this all with CSS so you don't need to go into the DOM and dynamically change any elements.

If you include the following CSS (adapted from show collapse state with Chevron icon):

.accordion-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\2212"; /* Plus */   
    float: right; 
    color: grey; 
}
.accordion-heading a.collapsed:after {
    content: "\2b";  /* Minus */
}

Then you can even get rid of the icon elements as this will create an icon and toggle it appropriately based on whether the anchor element has the collapsed class.

Demo in jsFiddle

Or, if you don't like using psuedo selectors, you can just include both icons and then toggle their visibility as needed.

Title One
<i class="icon-plus"></i>
<i class="icon-minus"></i>

.accordion-heading .icon-plus { display: none; }
.accordion-heading .icon-minus { display: block; }
.accordion-heading .collapsed .icon-plus { display: block; }
.accordion-heading .collapsed .icon-minus { display: none; }

Demo in jsFiddle

score 0 · Accepted Answer · edited Jul 22 '14 at 20:09

0

You can see a working example where I adapted to your Fiddle to make it work.

function toggleChevron(e) {
    jQuery(e.target)
    .prev('.accordion-heading')
    .find("i")
    .toggleClass('icon-plus icon-minus');
}
jQuery('#comuniArchivos').on('hidden.bs.collapse', toggleChevron);
jQuery('#comuniArchivos').on('shown.bs.collapse', toggleChevron);

jQuery('.panel-default').on('show.bs.collapse', function() {
    jQuery(this).addClass('active');
});

jQuery('.panel-default').on('hide.bs.collapse', function() {
    jQuery(this).removeClass('active');
});

That first toggle in your HTML needs to be icon-minus because it's expanded by default.

edited Jul 22 '14 at 20:09

KyleMit

30,350
66
462
664

answered Jul 22 '14 at 14:47

Aibrean

6,297
1
22
38

Excellent works. One more question, is there a way to make the function work with all accordions? I have thought that having more accordions in different places and with different ID, as I can handle them all with just one function? or I have to configure each of them? – chalo Jul 22 '14 at 16:18
This is a very heavy and inelegant solution. – TD1 Apr 16 '20 at 15:36
Yea could be easily done with CSS... of course I've learned a lot in 6 years ;) – Aibrean Apr 16 '20 at 23:08

score -1 · Answer 3 · edited Jul 22 '14 at 20:16

-1

Here is a working bootply to show you two easy functions. You are on the right track:

$('#collapseOne').on('show.bs.collapse',function() {
    $(".drop").addClass('glyphicon-minus')
              .removeClass('glyphicon-plus');
});

$('#collapseOne').on('hide.bs.collapse',function() {
    $(".drop").addClass('glyphicon-plus')
              .removeClass('glyphicon-minus');
});

edited Jul 22 '14 at 20:16

KyleMit

30,350
66
462
664

answered Jul 22 '14 at 14:50

Jordan.J.D

7,999
11
48
78

Display an icon when open and another when closed (jQuery Bootstrap)

3 Answers3

Demo in jsFiddle

Demo in jsFiddle