CODEWITHSUNDEEP
csstwitter-bootstrap-3
Pedro Henrique
Pedro Henrique

Reputation: 782

Bootstrap 3 accordion chevron issue

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";
}

Upvotes: 2

Views: 2879

Answers (1)

Serlite
Serlite

Reputation: 12258

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.

Upvotes: 1

Related Questions