аккордеон bootstrap3 не работает

Question

Привет, я использовал следующий код для отображения аккордеона, так как я обновился до bootstrap3, аккордеон больше не работает, я попытался добавить панель div, но аккордеон, кажется, работает, а затем не работает. Я могу открыть каждый раздел, но когда я возвращаюсь к первому, он не отображается, и ни один из других отображений тоже?

        <div class="row add-top add-bottom-main">
              <div class="panel accordion" id="accordion2">

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-one">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>


                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-two">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-three">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-four">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseFour" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>
    </div>
    </div>

Другая проблема, с которой я сталкиваюсь, заключается в том, что эта строка раньше была скрыта

<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>

Я обновил код, и теперь он отображается постоянно?

<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">

я что-то здесь упускаю?

спасибо

M

Answer 1

В Bootstrap 3 разметка accordion больше не поддерживается.

Но вы все равно можете получить эффект аккордеона, используя функцию сворачивания.Здесь есть пример аккордеона.

http://getbootstrap.com/javascript/#collapse

Вот пример с вашим кодом.

http://www.bootply.com/94409#

Что касается вашей последней проблемы, похоже, что в bootStrap 3 появились новые вспомогательные классы.

http://getbootstrap.com/css/#helper-classes

hidden-xs применяется к телефонам и hidden-sm относится к таблеткам.

Так:

<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">