Аккордеон-переключатель Bootstrap неправильно загружает символ содержимого (+/-) при первой загрузке страницы

Привет, я использовал приведенный ниже код переключения аккордеона на своей странице visualforce. Складной переключатель работает нормально, за исключением случаев, когда страница загружается в первый раз. При загрузке/обновлении страницы свернутая панель отображается с символом «-» вместо ожидаемого содержимого «+». Может ли кто-нибудь помочь мне с этим?

Код страницы 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; }

person Aarthi Priyadharshini    schedule 21.03.2016    source источник


Ответы (1)


Установите для них значение class="accordion-toggle collapsed" в разметке. Это было то, что они будут изначально установлены в состояние свертывания и отображать значок +.

http://codeply.com/go/909KJuqOs5

person Zim    schedule 21.03.2016
comment
Это было действительно полезно. Спасибо большое. :-) - person Aarthi Priyadharshini; 22.03.2016