الأكورديون 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">

نسيت شيئا ما هنا؟

شكرًا

م

Answer 1

في Bootstrap 3، لم يعد ترميز الأكورديون مدعومًا.

ولكن لا يزال بإمكانك الحصول على تأثير الأكورديون باستخدام وظيفة الطي.هناك مثال الأكورديون هنا.

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">