Accordion Collapse Indicators

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="bg-box">
    <div class="row-fluid">
        <div class="accordion" id="comuniArchivos">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <h3>
                        <a class="accordion-toggle" href="#collapseMayo"
                        data-toggle="collapse" data-parent="#comuniArchivos" >
                            Title One
                            <i class="icon-plus"></i>
                            <i class="icon-minus"></i>
                        </a>
                    </h3>
                    
                </div>
                <div id="collapseMayo" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <ul class="list-archivos">
                            <li class="clearfix">
                                <div class="span2 imagen">
                                    <img src="http://lorempixel.com/575/280/people/7/"
                                    alt="Imagen thumb"/>
                                </div>
                                <div class="span10 detalle">
                                    <h3><a href="#">Lorem ipsum dolor sit amet.</a></h3>
                                    <span>Lorem text </span>
                                    
                                </div>
                            </li>
                            <li class="clearfix">
                                <div class="span2 imagen">
                                    <img src="http://lorempixel.com/575/280/people/1/"
                                    alt="Imagen thumb"/>
                                </div>
                                <div class="span10 detalle">
                         ...

CSS

.accordion-heading h3 {
    line-height: normal;
}
.accordion-heading .icon-plus, .accordion-heading .icon-minus {
    float: right;
}
.accordion-heading .icon-plus { display: none; }
.accordion-heading .icon-minus { display: block; }
.accordion-heading .collapsed .icon-plus { display: block; }
.accordion-heading .collapsed .icon-minus { display: none; }