アコーディオンCSSの前と使用

Question

後、私は5枚のパネルの合計は、（ここでは単に1を示すことになる）と、アコーディオンのためのコードを書かれている

問題は、ページのロードが、パネルのタイトルボタンが自動的に強調表示されたときに、あります緑色である。私がそれらをクリックすると、スムーズにセクションが開き、すべての詳細を読み書きできます。しかし、これを一度行うと、私のボタンは正常に戻ります（パネルのタイトルには灰色の背景の+記号が表示されます）。ページが読み込まれたときに、最初はこのようになっていないのはなぜですか？

fiddle with code

<div class="container"> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <!--panel 1--> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapse"> 
      Committee 1 Details 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia lacinia mauris, at ultricies leo ornare nec. Vivamus eu est vel felis dignissim tempor. Nulla facilisi. Duis molestie tortor ac tempor volutpat. Phasellus nec mi aliquet, sollicitudin 
      neque eget, consectetur libero. Vestibulum sollicitudin sapien libero, egestas tempus eros scelerisque eu. 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

#accordion .panel-title a:after, #accordion .panel-title a.collapsed:after { 
content: "\f068"; 
font-family: FontAwesome; 
font-size: 15px; 
color: #fff; 
width: 45px; 
height: 100%; 
line-height: 54px; 
text-align: center; 
position: absolute; 
top: 0px; 
left: -1px; 
background: #3DC9B3; 
transition: all .2s; 
} 
#accordion .panel-title a.collapsed:after { 
content: "\f067"; 
color: #959595; 
background: #f4f4f4; 
transition: all 0.5s ease 0s; 
} 

Answer 1

あなたが記述している "ノーマル" CSSは、クラス.collapsedのオフに基づいています。そのクラスは、アコーディオンアイテムを折りたたんだ後にのみ適用されます。ページロード時に最初にその方法を表示させるには、要素のHTMLに.collapsedクラスを追加します。

<div class="container"> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <!--panel 1--> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapse"> 
      Committee 1 Details 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia lacinia mauris, at ultricies leo ornare nec. Vivamus eu est vel felis dignissim tempor. Nulla facilisi. Duis molestie tortor ac tempor volutpat. Phasellus nec mi aliquet, sollicitudin 
      neque eget, consectetur libero. Vestibulum sollicitudin sapien libero, egestas tempus eros scelerisque eu. 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

https://jsfiddle.net/eenbdhkz/5/