Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

后端 未结 19 2460
失恋的感觉
失恋的感觉 2020-12-22 18:23

I\'ve set up this simple version of the Bootstrap accordion:

Simple accordion: http://jsfiddle.net/darrenc/cngPS/

Currently the icon only po

19条回答
  •  死守一世寂寞
    2020-12-22 18:56

    The most readable CSS-only solution would probably be to use the aria-expanded attribute. Remember that you'll need to add aria-expanded="false" to all collapse-elements as this is not set on load (only on first click).

    The HTML:

    
    

    The CSS:

    h2[aria-expanded="false"] span.glyphicon-chevron-down,
    h2[aria-expanded="true"] span.glyphicon-chevron-right
    {
        display: none;
    }
    
    h2[aria-expanded="true"] span.glyphicon-chevron-down,
    h2[aria-expanded="false"] span.glyphicon-chevron-right
    {
        display: inline;
    }
    

    Works with Bootstrap 3.x.

提交回复
热议问题