JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

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" data-toggle="collapse" data-parent="#comuniArchivos" href="#collapseMayo">
                          Title One<span><i class="icon-plus"></i></span>
                        </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">
                                     <h3><a href="#">Lorem ipsum dolor sit amet.</a></h3>
 <span>Lorem text </span>

                                </div>
                            </li>
                            <li class="clearfix">
                                <div...

CSS

span .icon-plus, span .icon-minus {
    float: right;
}
.accordion-heading h3 {
    line-height: normal;
}

JavaScript

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-plus").removeClass("icon-plus").addClass("icon-minus");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-minus").removeClass("icon-minus").addClass("icon-plus");
});