Проблемы, получая группу кнопок Bootstrap 3, чтобы правильно вызвать аккордеон

Question

Я пытаюсь создать страницу в Bootstrap, которая будет иметь список двухсторонних групп. Первичная кнопка заставит событие, которое я собираюсь написать позже, но цель - иметь кнопку справа от группы кнопок (которая выглядит как раскрывающая кнопка), чтобы вызвать аккордеон под кнопкой.

У меня есть все или меньше работы со следующими вопросами: 1) По какой-то причине левая сторона группы кнопки имеет округлые углы, а правая сторона имеет острые края. Не большая сделка, но раздражает.

2) Есть некоторые странные визуальные эффекты при раскрытии аккордеона. Для долировки секунды, кажется, расширяется бесконечно, со странными линиями на правой стороне коробки. Тогда все защелкивается к тому, как он должен выглядеть.

3) При сверках открытого аккордеона DIV просто исчезает вместо плавно прокручивания резервного копирования.

4) Существует странная строка ниже второй кнопки, которую я предполагаю, что имеет что связано с панелью аккордеона, но я не уверен.

Любая помощь или подсказки будут оценены. Спасибо!

html:

<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%;
}

.

bootply: rel="nofollow"> http://bootply.com/104455

Answer 1

Переместить генеракодицетагкод за пределами <div id="collapsible-1" class="collapse">

Это был генеракодицетагкод внутри генеракодицетагкода, который, кажется, вызывает ваши проблемы ...

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>

.

Тогда я взял свою идею и воссоздал ее немного по-другому, просто для funzies.

Моя версия