web-dev-qa-db-fra.com

Accordéon À l'intérieur de l'accordéon Twitter bootstrap?

J'essaie d'implémenter un accordéon dans un autre accordéon en utilisant Twitter Bootstrap. C'est possible? si c'est le cas, alors aidez-moi avec le code car j'ai essayé de l'implémenter mais je n'ai pas réussi.

twitter-bootstrapaccordion
24
avinashizhere

Incluez simplement un autre accordéon à l'intérieur du div avec la classe accordéon-inner:

<div class="accordion" id="accordion1">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
      Collapsible Group #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        This is a simple accordion inner content...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
        Collapsible Group #2 (With nested accordion inside)
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">

        <!-- Here we insert another nested accordion -->

        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                Collapsible Inner Group Item #1
              </a>
            </div>
            <div id="collapseInnerOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                Collapsible Inner Group Item #2
              </a>
            </div>
            <div id="collapseInnerTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
        </div>          

        <!-- Inner accordion ends here -->

      </div>
    </div>
  </div>
</div>

N'oubliez pas d'utiliser différents identifiants d'accordéon.

28
Alessandro Alessandra

cela fonctionne plus fluide dans Bootstrap v3.2.0

        <div class="panel-group" id="accordion1">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
              Collapsible Group #1
              </a></h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                This is a simple accordion inner content...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                Collapsible Group #2 (With nested accordion inside)
              </a></h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">

                <!-- Here we insert another nested accordion -->

                <div class="panel-group" id="accordion2">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                        Collapsible Inner Group Item #1
                      </a></h4>
                    </div>
                    <div id="collapseInnerOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                        Collapsible Inner Group Item #2
                      </a></h4>
                    </div>
                    <div id="collapseInnerTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Inner accordion ends here -->

              </div>
            </div>
          </div>
        </div>
16
Francesco

J'ai trouvé que la solution d'Alessandro ne fonctionne pas avec Bootstrap 3. En voici une qui fonctionne (légèrement différente, sans panneau étendu par défaut. Si vous en avez besoin, ajoutez simplement la classe "in"):

<div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
      Collapsible Group #1
      </a></h4>
    </div>
    <div id="collapseOne" class="panel-body collapse">
      <div class="panel-inner">
        This is a simple accordion inner content...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
        Collapsible Group #2 (With nested accordion inside)
      </a></h4>
    </div>
    <div id="collapseTwo" class="panel-body collapse">
      <div class="panel-inner">

        <!-- Here we insert another nested accordion -->

        <div class="panel-group" id="accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                Collapsible Inner Group Item #1
              </a></h4>
            </div>
            <div id="collapseInnerOne" class="panel-body collapse">
              <div class="panel-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                Collapsible Inner Group Item #2
              </a></h4>
            </div>
            <div id="collapseInnerTwo" class="panel-body collapse">
              <div class="panel-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
        </div>

        <!-- Inner accordion ends here -->

      </div>
    </div>
  </div>
</div>
10
Massimiliano Arione

Si vous utilisez des événements de réduction sur des éléments repliables imbriqués, cela permet d'empêcher les événements de réduction de se propager au-dessus du niveau du groupe de panneaux. Sinon, les événements de repli déclenchés par des éléments repliables internes atteindront les éléments externes essayant de gérer les événements de repli déclenchés par leurs propres éléments repliables, et provoqueront un comportement inattendu.

$('.panel-group').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function (e) {
  e.stopPropagation();
});

Cet exemple suppose que vous utilisez "panel-group" comme nom de classe pour regrouper les éléments réductibles.

1
Sorin