Bootstrap 3, accordian toggle - glyphicon default state?

Question

thanks for your help.

This solution comes closest, but the default icon states are wrong: Bootstrap 3 Accordion vs jquery UI accordion and Bootstrap 3 Collapse show state with Chevron icon and http://jsfiddle.net/arunpjohny/p84nw/

Need default state for all panels to be collapsed, with correct collapsed icon. The code below results in the top accordion panel expanded, but with all icons showing the "expanded" state.

I've tried some .js to add/remove class, but no luck. Also played with .panel-default, no-go.

CSS:

.panel-heading .accordion-toggle:after {      
    /* symbol for "opening" panels */        
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: left;
    padding-right: 10px;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {    
    /* symbol for "collapsed" panels */    
    content:"\e080";
}

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
</div>

score 1 · Answer 1 · answered Feb 26 '16 at 16:13

Missed you by a few years. Had a similar problem in a project I'm working on today. Solved it by placing adding the 'collapsed' class into the panel-heading and changing the CSS a little. Also it works so that the panel header can be clicked anywhere and will trigger the panel animation. Lastly, use span instead of anchor, way less messy. Seems to be working for me. Hopefully this helps anyone that comes through with the same problem as myself.

PANEL:

    <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOne"> /*FIX HERE*/
        <h4 class="panel-title">
            <span class="accordion-toggle"> 
                Collapsible Group Item #1
            </span>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse"> /* REMOVED 'in'*/
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
        </div>
    </div>
</div>

CSS:

     .panel-heading .accordion-toggle:after {
        font-family: 'Glyphicons Halflings'; 
        content: "\e114"; 
        float: right;
        color: #ffffff;
    }
    .panel-heading.collapsed .accordion-toggle:after{ /*2ND FIX HERE*/
        font-family: 'Glyphicons Halflings'; 
        content: "\e080"; 
        float: right; 
        color: #ffffff;
    }

score 0 · Answer 2 · edited Dec 08 '14 at 12:32

0

JSFiddle solution here :)

You make some mistakes:

CSS select is bad,
You should use :before pseudo-class instead of :after
You need to remove in class from your first collapse

You need to add collapsed classes to your collapse.

.panel-heading.accordion-toggle:before {           
/* symbol for "opening" panels */

font-family:'Glyphicons Halflings';
content:"\e114";
float: left;
padding-right: 10px;
color: grey;
}

.panel-heading.accordion-toggle.collapsed:before {         
/* symbol for "collapsed" panels */    

 content:"\e080";
}

edited Dec 08 '14 at 12:32

G.L.P

7,119
5
25
41

answered Jan 28 '14 at 20:40

guli

1,183
1
9
19

why couldnt i see the glyphicon images on the fiddel ?Also when i copy the code to local still the issue exist. – rolling stone Jan 28 '15 at 09:30

Bootstrap 3, accordian toggle - glyphicon default state?

2 Answers2