Mindfuc Mindfuc - 1 year ago 89
CSS Question

Changing icons when collapse is active (bootstrap accordion)

I have something like this :

<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">
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body collapse-text">text.</div>

And i want to change my icon which is class 'unactive' to tranform: rotate 180deg when collapse is 'active' ? Is it possible to do this using only CSS ? Thanks in advence.

PS. I found many similar topics but i really havent found any usefull informations

Answer Source

Bootstrap adds a collapsed class when the accordion is closed. Use that to rotate the icon in your CSS..

.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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download