Ändern Icons, wenn Zusammenbruch aktiv ist (Bootstrap-Akkordeon)

Question

Ich habe so etwas wie dies:

<div class="panel-group" id="accordion"> 
       <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
        <img class="icons" src="img/photography.png"> 
        <img class="unactive" src="img/arrow.png"> 
        </a> 
        </h4> 
       </div> 
       <div id="collapse1" class="panel-collapse collapse in"> 
        <div class="panel-body collapse-text">text.</div> 
       </div> 
       </div> 

Und ich möchte, dass meine Symbol ändern, die Klasse ist unactive tranform: drehen 180 Grad, wenn Zusammenbruch ‚aktiv‘ ist? Ist es möglich, dies nur mit CSS zu tun?

PS. Ich habe viele ähnliche Themen gefunden, aber ich habe wirklich keine nützlichen Informationen gefunden.

Answer 1

Bootstrap fügt eine collapsed Klasse, wenn das Akkordeon geschlossen ist. Verwenden Sie, dass das Symbol in der CSS zu drehen ..

.panel-heading .unactive { 
    -webkit-transform: rotate(180deg);  
    -moz-transform: rotate(180deg);   
    -o-transform: rotate(180deg);   
    -ms-transform: rotate(180deg);   
    transform: rotate(180deg);    
} 

.panel-heading .collapsed .unactive { 
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);   
    -o-transform: rotate(0deg);   
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg);  
} 

Demo: http://www.codeply.com/go/7vCbLaj4LX

Answer 2

Änderung drehen Eigenschaft mit Klasse

.panel-title .unactive{ 
tranform: rotate 180deg 
} 
.panel-title .active{ 
tranform: rotate 0deg 
}