ブートストラップアコーディオンフォームの可視性を制御する方法

Question

私は、フォームを作成するユニークな方法としてブートストラップアコーディオンを使用しています。基本的に、このフォームにはそれぞれ独自のアコーディオンパネルが7つあります。今私は彼らがすべて倒れている場所を望むようにそれを持っています。そして、あなたが最初のアコーデオンを開くと、2番目のアコーデオンにリンクするボタンがあります。これはまさに私がそれを働かせたいものです。しかし、「次へ」ボタンが選択されるまで他のアコーディオンパネルを隠す方法はありますか？

たとえば、ページを読み込むと、「1.機能の選択」を表示し、次のボタンが押されたときにアイテムを選択すると、2番目のパネルが表示されて開くアップ。等々。

私はそれらを隠しておいた場所に何かできると思っていますが、ボタンが表示されるようにトリガーしていますか？私はこれのようなものの例を探していましたが、何も見つかりませんでした。私はこのサイトがコード作成サービスではないことを知っています。だから誰かが私を正しい方向に向けることができれば、私は残りをすることができます。

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default" id="panel1"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 1 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default" id="panel2"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 2 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default" id="panel3"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. Contact Info </a> </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 3 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button> 
     </div> 
    </div> 
    </div> 

</div> 

JSFiddleで再作成したので、私が話していることを確認して再生することができます。

Fiddle HERE

Answer 1

あなたはhide()方法、例えばを使用して準備ができて機能上で初めて、あなたが欲しいのdivを非表示にすることができますnextclickイベントを添付して、クリックする度に好きなようにaccordionを制御します。

$('body').on('click', '#btn-next-id', function(){ 
    //Here show hide divs you want 
}) 

これが役に立ちます。

---

スニペット

$(function(){ 
 
    //Hide other steps for the first time 
 
    $('#panel2, #panel3').hide(); 
 
    
 
    $('body').on('click', '#next1', function(){ 
 
     $('#panel2').show(); 
 
    }) 
 

 
    $('body').on('click', '#next2', function(){ 
 
     $('#panel3').show(); 
 
    }) 
 
})

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
I'm using the bootstrap accordion. 
 

 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" id="panel1"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      Testing 1 
 
     <button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="panel panel-default" id="panel2"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. STANDARD FEATURES </a> </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      Testing 2 
 
     <button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="panel panel-default" id="panel3"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. REAL ESTATE FEATURES </a> </h4> 
 
    </div> 
 
    <div id="collapseThree" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      Testing 3 
 
     <button id="next3" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

これはあなたが探しているが、どのように、単にステップ2とステップ3の見出しからアンカー要素の削除についてユーザがそれらをクリックすることはできませんしているまさにである場合、私はわからないんだけどそれらを開く？ここで更新フィドル：彼らはプロセスまで戻ることができるようにhttps://jsfiddle.net/DTcHh/15338/

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default" id="panel1"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 1 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default" id="panel2"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 2. STANDARD FEATURES </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 2 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default" id="panel3"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 3. REAL ESTATE FEATURES </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Testing 3 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button> 
     </div> 
    </div> 
    </div> 

</div> 

あなたも、ステップ2と3に「前」ボタンを追加しますか？ここで、このため、ここで更新フィドル：あなたは、すべてのボタンに識別子idを追加する必要がありますその後

$('#panel2, #panel3').hide(); 

：https://jsfiddle.net/DTcHh/15339/