Problèmes pour que le groupe de boutons Bootstrap 3 déclenche correctement un accordéon

Question

J'essaie de créer une page dans bootstrap qui contiendra une liste de groupes à deux boutons.Le bouton principal déclenchera un événement que je vais écrire plus tard, mais le but est d'avoir le bouton à droite du groupe de boutons (qui ressemble à un bouton déroulant) pour déclencher un accordéon sous le bouton.

Je l'ai plus ou moins travaillé avec les problèmes suivants :1) Pour une raison quelconque, le côté gauche du groupe de boutons a des coins arrondis et le côté droit a des bords tranchants.Ce n'est pas grave, mais c'est irritant.

2) Il y a des effets visuels étranges lors du déclenchement de l'ouverture de l'accordéon.Pendant une fraction de seconde, il semble s'étendre indéfiniment, avec d'étranges lignes sur le côté droit de la boîte.Ensuite, tout revient à ce à quoi il est censé ressembler.

3) Lors de la réduction de l'accordéon ouvert, le div disparaît simplement au lieu de remonter en douceur.

4) Il y a une ligne étrange sous le deuxième bouton, qui, je suppose, a quelque chose à voir avec le panneau accordéon mais je n'en suis pas sûr.

Toute aide ou conseil serait apprécié.Merci!

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

Bouge le <div id="collapsible-1" class="collapse"> en dehors du <div class="btn-group btn-block btn-group-lg">

C'était le collapse être à l'intérieur du btn-group cela semble être à l'origine de vos problèmes...

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>

Ensuite, j'ai pris votre idée et je l'ai recréée légèrement différemment, juste pour le plaisir.

Ma version