4

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>
Community
  • 1
  • 1
user3245966
  • 41
  • 1
  • 2

3 Answers3

1

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;
    }
Thommy Guns
  • 11
  • 1
0

JSFiddle solution here :)

You make some mistakes:

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

  4. 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";
}
G.L.P
  • 7,051
  • 4
  • 22
  • 40
guli
  • 1,173
  • 1
  • 9
  • 19
-2

http://jsfiddle.net/liwei78/vpy57Lpn/1/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_9" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          产品详情
        </h4>
      </div>
      <div id="collapse_9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            香味：花香、草本芳香
             产品质地：轻薄易吸收  
            肌肤触感：调和肤质、轻柔保湿、不油不腻
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_10" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          主导成分及功效
        </h4>
      </div>
      <div id="collapse_10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            葡萄籽萃取：富含天然抗氧化物，帮助肌肤抵御环境的侵害。其具有锁水功能，可帮助改善肤质，保持肌肤的柔滑与滋润。 
            乳木果：又名“牛油果”。具有高含油量及丰富维他命、叶酸、铁和钾等，性质温和，能卓效修护天然皮脂膜，强化保湿屏障，迅速提升肌肤水润度和锁水力。
            多莲：又名“桃金娘”，属热带海岛植物。富含维生素C及氨基酸，抗敏并修复受损肌肤。具有非凡的抗氧化功能，抵御自由基与外界环境侵害，具有高效保湿机能，保持肌肤润泽，回复肌肤弹力。
            天然理疗精油：蕴含白兰花、玫瑰天竺葵、薰衣草、佛手柑和马丁香等多种精纯植物精油，带来舒缓沉静的自然感受。
            维生素E：抗氧化，减少色素沉淀、延缓皱纹产生
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_5" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          如何使用
        </h4>
      </div>
      <div id="collapse_5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            取适量身体乳，从头到双脚进行涂抹；可特别针对乾燥部位(如手肘及双脚)进行按摩。
        </div>
      </div>
    </div>
</div>


<script>
$(function(){
  $('div.panel-collapse').on('show.bs.collapse', function() {
    $(this).parent("div").find("i.glyphicon-chevron-left").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-down");
  });

  $('div.panel-collapse').on('hide.bs.collapse', function() {
    $(this).parent("div").find("i.glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-left");
  });
})
</script>
liwei
  • 1
  • 1