同じページの2つのブートストラップアコーディオン

Question

私はBoostrapフレームワークを使用していますが、私はアコーディオンに問題があります。私は2つのブートストラップアコーディオンhttp://twitter.github.com/bootstrap/javascript.html#collapseを同じページに追加しようとしているので、1つだけうまく動作します。これらのアコーディオンを同じページに2つ追加する方法はありますか？

あなたの時間はThxです。あなたはdata-parentとアコーディオンオブジェクトID（例えばid="collapseTwo"）に最初のアコーディオンを参照しているので、あなたが両方のアコーディオンを区別し、すべてが正常に動作二アコーディオンに適切data-parentプロパティを設定したら

Answer 1

あなたの第二のアコーディオンは、機能していません。

ユニークなIDと適切なデータ・親参照

<h1>First Accordion</h1> 
<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </div> 
     <div id="collapseOne" class="accordion-body in collapse" style="height: auto; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </div> 
     <div id="collapseThree" class="accordion-body collapse" style="height: 0px; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
</div> 

<hr> 

<h1>Second Accordion</h1> 
<div class="accordion2" id="accordion3"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse4"> 
      Collapsible Group Item #1 
     </a> 
     </div> 
     <div id="collapse4" class="accordion-body in collapse" style="height: auto; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse5"> 
      Collapsible Group Item #2 
     </a> 
     </div> 
     <div id="collapse5" class="accordion-body collapse" style="height: 0px; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse6"> 
      Collapsible Group Item #3 
     </a> 
     </div> 
     <div id="collapse6" class="accordion-body collapse" style="height: 0px; "> 
     <div class="accordion-inner"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
     </div> 
    </div> 
</div> 

デモを修正マークアップ：http://jsfiddle.net/STqCF/

Answer 2

まず、あなたのはjqueryのJavaScriptとでは、すべてのIDがでなければならないことに留意して維持する必要がありますユニークで、1ページで1回だけ使用されます。問題はidsがページ内で競合するという唯一の原因です。 だから、あなたは二つのこと、アンカーの アンカーのデータ・親とHREFを修正する必要が

あなた

<div class="accordion_one"> 
<!--starting accourdion one--> 
<h2 class="adelfox_heading">Accourdion Style 1</h2> 
    <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="#1_collapseOne"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Solution 
      </a> 
      </h4> 
     </div> 
     <div id="1_collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion1" href="#1_collapseTwo"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Technology 
      </a> 
      </h4> 
     </div> 
     <div id="1_collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion1" href="#1_collapseThree"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Mission 
      </a> 
      </h4> 
     </div> 
     <div id="1_collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion1" href="#1_collapseFour"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Vision 
      </a> 
      </h4> 
     </div> 
     <div id="1_collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 

    </div> 
<!--end of starting accourdion one--> 
</div> 



<div class="accordion_two"> 
<!--starting accourdion two--> 
<h2 class="adelfox_heading">Accourdion Style 2</h2> 
    <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="#2_collapseOne"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Solution 
      </a> 
      </h4> 
     </div> 
     <div id="2_collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion2" href="#2_collapseTwo"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Technology 
      </a> 
      </h4> 
     </div> 
     <div id="2_collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion2" href="#2_collapseThree"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Mission 
      </a> 
      </h4> 
     </div> 
     <div id="2_collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion2" href="#2_collapseFour"> 
       <i class="fa fa-plus"></i><i class="fa fa-minus"></i> 
       Our Vision 
      </a> 
      </h4> 
     </div> 
     <div id="2_collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
      </div> 
     </div> 
     </div> 

    </div> 
<!--end of starting accourdion two--> 
</div> 

Answer 3

更新ビュー・ブートストラップ・アコーディオン・プラグインstyle.tplのデモ.phpに固有のIDを設定するには、

<div id="views-bootstrap-accordion-<?php print $id ?>" class="<?php print $classes ?>"> 
    <?php foreach ($rows as $key => $row): ?> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" 
      data-toggle="collapse" 
      data-parent="#views-bootstrap-accordion-<?php print $id ?>" 
      href="#collapse<?php print $id . "-" . $key ?>"> 
      <?php print $titles[$key] ?> 
      </a> 
     </h4> 
     </div> 

     <div id="collapse<?php print $id . "-" . $key ?>" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <?php print $row ?> 
     </div> 
     </div> 
    </div> 
    <?php endforeach ?> 
</div>