Problemas de obtenção de Bootstrap 3 grupo de botão para acionar corretamente um acordeão

Question

Eu estou tentando criar uma página no bootstrap que vai ter uma lista de dois grupos de botões.O botão principal irá disparar um evento que eu vou escrever mais tarde, mas o objetivo é ter o botão do lado direito do botão de grupo (que se parece com uma lista suspensa botão) para acionar um acordeão sob o botão.

Eu tenho mais ou menos a trabalhar com os seguintes problemas:1) Por alguma razão, o lado esquerdo do grupo de botões com cantos arredondados e com o lado direito tem bordas afiadas.Não é um grande negócio, mas irritante.

2)Há alguma estranha efeitos visuais quando acionar o acordeão abrir.Por uma fração de segundo parece expandir-se indefinidamente, com estranhas linhas no lado direito da caixa.Em seguida, tudo se encaixa de volta para a forma como é suposto para olhar.

3) Quando o recolhimento das abra o acordeão, a div simplesmente desaparece, em vez da suave rolar de volta para cima.

4) Há um estranho linha abaixo do segundo botão, que eu acho que tem algo a ver com o acordeão do painel, mas não tenho certeza.

Qualquer ajuda ou sugestões serão bem-vindos.Obrigado!

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: http://bootply.com/104455

Answer 1

Mova o <div id="collapsible-1" class="collapse"> fora do <div class="btn-group btn-block btn-group-lg">

Ele foi o collapse estar dentro do btn-group que parece estar causando seus problemas...

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>

Em seguida, peguei a sua ideia e recriado de forma ligeiramente diferente, apenas para funzies.

Minha versão