Bootstrap Akkordeon mit Pfeilen

Question

Ich habe eine einfache Frage zum Bootstrap Akkordeon.

Ich habe ein Akkordeon erstellt, das auf den Header geklickt werden kann, um zu erweitern. Das funktioniert gut, aber mein Problem ist, dass die Pfeile nicht in der Kopfzeile angezeigt werden.

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
      <h4 class="panel-title">Test1</h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>sadfsadfsdaf sadf</p> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"> 
      <h4 class="panel-title">Test2</h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>Bla bla bla</p> 
      </div> 
     </div> 
    </div> 
    </div> 

CSS:

.panel-heading [data-toggle="collapse"]:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e072"; /* "play" icon */ 
    float: right; 
    color: #b0c5d8; 
    font-size: 18px; 
    line-height: 22px; 

    /* rotate "play" icon from > (right arrow) to down arrow */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform:  rotate(-90deg); 
    -o-transform:  rotate(-90deg); 
    transform:   rotate(-90deg); 
} 
.panel-heading [data-toggle="collapse"].collapsed:after { 
    /* rotate "play" icon from > (right arrow) to^(up arrow) */ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform:  rotate(90deg); 
    -o-transform:  rotate(90deg); 
    transform:   rotate(90deg); 
} 

Hier ist ein JSFiddle

Answer 1

Problem im Raum zwischen Selektoren:

.panel-heading [data-toggle="collapse"]:after 
       ^------- // remove this space to make this selector work 

Nun Auswahl Sie alle Elemente mit data-toggle Attribut, das sind d Nachkommen von .panel-heading. Es sollte sein:

.panel-heading[data-toggle="collapse"]:after 

.panel-heading { 
 
    position: relative; 
 
} 
 
.panel-heading[data-toggle="collapse"]:after { 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: "\e072"; /* "play" icon */ 
 
    position: absolute; 
 
    color: #b0c5d8; 
 
    font-size: 18px; 
 
    line-height: 22px; 
 
    right: 20px; 
 
    top: calc(50% - 10px); 
 

 
    /* rotate "play" icon from > (right arrow) to down arrow */ 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform:  rotate(-90deg); 
 
    -o-transform:  rotate(-90deg); 
 
    transform:   rotate(-90deg); 
 
} 
 
.panel-heading[data-toggle="collapse"].collapsed:after { 
 
    /* rotate "play" icon from > (right arrow) to^(up arrow) */ 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform:  rotate(90deg); 
 
    -o-transform:  rotate(90deg); 
 
    transform:   rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Accordion START --> 
 
     <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
 
      <h4 class="panel-title">Test1</h4> 
 

 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>sadfsadfsdaf sadf</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"> 
 
      <h4 class="panel-title">Test2</h4> 
 

 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
<p> 
 
Bla bla bla 
 
</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Accordion END -->