2

I've done the same thing that "WeaverSnap" said in answer to this question.

My accordion is just like the JSFiddle he posted.

The problem is, the chevron icons start in the wrong state, but fix themselfs after one of the panels get toggled.

It's a minor issue but i think it can be fixed.

Here is the CSS he provided: (I changed "FontAwesome" to "Glyphicons Halflings" BTW)

/* CSS Method for adding Font Awesome Chevron Icons */
 .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f077";
    float: right;
    color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f078";
}
Community
  • 1
  • 1
Pedro Henrique
  • 680
  • 7
  • 22

1 Answers1

1

Well...if you're not adverse to it, you could just add the class .collapsed to each of the .panel-heading elements. So they would each look like something this:

<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
    <!-- Child elements -->
</div>

This class dictates the facing of the chevron. You don't have to do this in the HTML directly; you could do it programmatically with jQuery when the page loads, since you've already got that loaded:

$(document).ready(function(){
    $(".panel-heading").addClass("collapsed");
});

Here's a JSFiddle that demonstrates this quick fix.

Hope this helps! Let me know if you have any questions.

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • It worked like a charm, also fixed another issue I was having, thank you very much! – Pedro Henrique Jun 16 '14 at 01:21
  • This works perfectly, thanks. Though, it's a really inelegant solution, since - to have icons consistent with state on load - we have to use both **two** classes: add "collapsed" panel heading and not add "in" to panel body to have a closed panel, or not add "collapsed" to panel heading and add "in" to panel body to have an opened panel... Working with Angular, I'd have to write a directive for this... Any solution more fit for angular, anybody? – MarcoS Mar 14 '16 at 15:06
  • @MarcoS Hey, sorry that my answer here wasn't applicable enough to your situation - unfortunately, posting a comment might not give you enough visibility to get you the best solution. I'd suggest posting a new question, and linking back to this answer in your explanation of what you've tried, and why it hasn't worked out for you. – Serlite Mar 14 '16 at 16:34
  • It did work, I only mean it works at cost of code cleanliness... I don't think a new question is required: it should be the same 1:1... What is required is a "better" answer... :-) – MarcoS Mar 14 '16 at 16:40