ブートストラップのアコーディオントグルが初めてページロード時にコンテンツシンボル（+/-）を間違ってロードする

こんにちは私は以下のアコーデオントグルコードを自分のVisualforceページで使用しています。折りたたみ可能なトグルは、最初にページを読み込んでいる間を除いて、うまく動作します。 pageload/Refreshでは、折りたたまれたパネルに、予想されるコンテンツ '+'の代わりに ' - 'というシンボルが表示されます。誰かがそれで私を助けてくれますか？ブートストラップのアコーディオントグルが初めてページロード時にコンテンツシンボル（+/-）を間違ってロードする

Visualforceページのコード：

<a hef="#" class="accordion-toggle" data-target="#collapse1" data-toggle="collapse">&nbsp; Data Panel 1 </a> 
    <div id="collapse1" class="panel-collapse collapse"> 
     <ul style="list-style-type:none"> 
      <li> <a hef="#" class="accordion-toggle" data-target="#collapse9" data-toggle="collapse">&nbsp;&nbsp; Data Panel 2</a> 
       <div id="collapse9" class="panel-collapse collapse"> 
         <ul style="list-style-type:none"> 
          <li><font style="color:#337ab7"> Description</font></li> 
         </ul> 
       </div> 
       </li> 
       <li> <a hef="#" class="accordion-toggle" data-target="#collapse8" data-toggle="collapse">&nbsp; &nbsp;Data Panel 3</a> 
       <div id="collapse8" class="panel-collapse collapse"> 
        <ul style="list-style-type:none"> 
          <li><font style="color:#337ab7"> Node 1</font></li> 
          <li><font style="color:#337ab7"> Node 2</font></li> 
          <li><font style="color:#337ab7"> Node 3</font></li> 
         </ul>                        

       </div> 
      </li> 
     </ul> 
    </div>

CSSスタイル：

.accordion-toggle:after { 
        font-family: 'Glyphicons Halflings'; 
        content: "\e082"; <!-- taken from bootstrap.css --> 
        float: left;   
       } 

       .accordion-toggle.collapsed:after { 
        content: "\e081"; <!-- taken from bootstrap.css --> 
       } 

       a 
       {cursor: pointer; }

出典

2016-03-21 Aarthi Priyadharshini