مشاكل في الحصول على مجموعة أزرار Bootstrap 3 لتشغيل الأكورديون بشكل صحيح

Question

أحاول إنشاء صفحة في bootstrap تحتوي على قائمة بمجموعات ذات زرين.سيؤدي الزر الأساسي إلى تشغيل حدث سأكتبه لاحقًا، ولكن الهدف هو أن يكون الزر الموجود على يمين مجموعة الأزرار (الذي يشبه زر القائمة المنسدلة) لتشغيل الأكورديون أسفل الزر.

لقد حصلت عليه أكثر أو أقل العمل مع القضايا التالية:1) لسبب ما، يحتوي الجانب الأيسر من مجموعة الأزرار على زوايا مستديرة بينما يحتوي الجانب الأيمن على حواف حادة.ليست مشكلة كبيرة، ولكنها مزعجة.

2) هناك بعض المؤثرات البصرية الغريبة عند تشغيل الأكورديون المفتوح.لجزء من الثانية يبدو أنه يتوسع إلى أجل غير مسمى، مع وجود خطوط غريبة على الجانب الأيمن من الصندوق.ثم يعود كل شيء إلى الشكل الذي من المفترض أن يبدو عليه.

3) عند طي الأكورديون المفتوح، يختفي div ببساطة بدلاً من التمرير بسلاسة للأعلى.

4) يوجد خط غريب أسفل الزر الثاني، والذي أفترض أن له علاقة بلوحة الأكورديون ولكني لست متأكدًا.

سيكون موضع تقدير أي مساعدة أو تلميحات.شكرًا!

لغة البرمجة:

<div align="center">
  <div class="accordion" id="myAccordion">
    <div class="panel">
      <div class="btn-group btn-block btn-group-lg">
        <button type="button" class="btn btn-default btn-main-title">
          Button 1
        </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-1" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>      

    <div class="btn-group btn-block btn-group-lg">
      <button type="button" class="btn btn-default btn-main-title">
        Button 2
      </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-2" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>
  </div>
</div>

CSS:

.btn-main-title {
  width: 75%;
  text-align: left;
}

.btn-main-dropdown {
  width: 15%;
}

التمهيد: http://bootply.com/104455

Answer 1

حرك ال <div id="collapsible-1" class="collapse"> خارج <div class="btn-group btn-block btn-group-lg">

لقد كان collapse وجوده داخل btn-group يبدو أن هذا هو سبب مشاكلك..

http://bootply.com/104468

<div class="accordion" id="myAccordion">
    <div class="panel">
        <div class="btn-group btn-block btn-group-lg">
           <button>...</button>
           <button>...</button>
        </div>      

        <div id="collapsible-1" class="collapse">
           <div>Content...</div>
        </div>
        ...
    </div>
</div>

ثم أخذت فكرتك وأعدت إنشائها بشكل مختلف قليلاً، فقط من أجل المرح.

نسختي