ブートストラップ折りたたみパネルが別のパネル開口部につぶれないようにする

Question

私はブートストラップ折りたたみを使用して折りたたみパネルを実装しています。これはfiddleで示されています。もう一方のパネルを開いてパネルを開いたままにしておくことができますか？それ自身のパネルの矢印のクリックだけを閉じます。

私はcss部分のコードを入れました。

.panel-heading .accordion-toggle:after { 
/* symbol for "opening" panels */ 
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ 
content: "\e114"; /* adjust as needed, taken from bootstrap.css */ 
float: right;  /* adjust as needed */ 
color: grey;   /* adjust as needed */ 
} 
.panel-heading .accordion-toggle.collapsed:after { 
/* symbol for "collapsed" panels */ 
content: "\e080"; /* adjust as needed, taken from bootstrap.css */ 
} 

Answer 1

アンカータグのdata-parent属性を削除します。

.panel-heading .accordion-toggle:after { 
 
    /* symbol for "opening" panels */ 
 
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ 
 
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */ 
 
    float: right;  /* adjust as needed */ 
 
    color: grey;   /* adjust as needed */ 
 
} 
 
.panel-heading .accordion-toggle.collapsed:after { 
 
    /* symbol for "collapsed" panels */ 
 
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    
 
<h2>Multiple Slides:</h2> 
 

 
<div class="panel-group" id="accordion2"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne"> 
 
      Group #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     Test 1 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo"> 
 
      Group #2 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Test 2 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" href="#collapseThree"> 
 
      Group #3 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseThree" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Test 3 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>