JSFiddle - React, Tailwind, and code Playground

by April Sadowski

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-minus"></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

function toggleChevron(e) {
            jQuery(e.target)
                    .prev('.accordion-heading')
                    .find("i")
                    .toggleClass('icon-plus icon-minus');
        }
        jQuery('#comuniArchivos').on('hidden.bs.collapse', toggleChevron);
        jQuery('#comuniArchivos').on('shown.bs.collapse', toggleChevron);
    
        jQuery('.panel-default').on('show.bs.collapse', function() {
            jQuery(this).addClass('active');
        });
    
        jQuery('.panel-default').on('hide.bs.collapse', function() {
            jQuery(this).removeClass('active');
        });