Twitter bootstrap 3.0 icon change on collapse

Question

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

I have searched far and wide, and have

Answer 1

Using only CSS, the bootstrap collapse icon can be changed with your predefined icons:

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}
a[aria-expanded=false] .glyphicon-minus {
    display: none;
}
.pointer{
  cursor:pointer;
}

  Filter By Price
  
  
  



  

    
500$
    
1000$
  

In your HTML add aria-expanded="false" and add two icons what you need to set in your collapse bar. Like,

  Filter By Price
  
  

And control it from css. When collapse bar expand then

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}

otherwise it will be

a[aria-expanded=false] .glyphicon-minus {
    display: none;
}

Run the snippet and I think you just need this...