CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapaccordion
Joshua Dickerson
Joshua Dickerson

Reputation: 157

Change Icon Direction on Accordion Collapse

I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.

As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});

Upvotes: 0

Views: 4031

Answers (1)

ryantdecker
ryantdecker

Reputation: 1810

I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.

1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).

2) Get rid of the JS and add this CSS:

.panel-heading.collapsed .glyphicon-chevron-down {
  transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
  transition:transform .5s;
  transform:rotateX(180deg);
}

If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.

http://jsfiddle.net/rr7oggLv/6/

Upvotes: 2

Related Questions