JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<br/><br/>
<div id="accordion">
    <div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
        <li class="list-group-item list-group-item-info"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#accordion"><span class="toggleMe toggleMeTo"></span></a>

        </li>
        <div id="cpath_1" class="list-group collapse" style="margin-bottom: -2px;">
            <div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
                <li class="list-group-item list-group-item-info"><a href="index.php?cPath=1_17">CDROM Drives</a><a href="#cpath_17" data-toggle="collapse"><span class="toggleMe toggleMeTo"></span></a>

                </li>
                <div id="cpath_17" class="list-group collapse" style="margin-bottom: -2px;">
                    <div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
                        <li class="list-group-item list-group-item-info"><a href="index.php?cPath=1_17_22">Testcat</a><a href="#cpath_22" data-toggle="collapse"><span class="toggleMe toggleMeTo"></span></a>

                        </li>
                        <div id="cpath_22" class="list-group collapse" style="margin-bottom: -2px;">
                            <div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
                                <li class="list-group-item"><a href="index.php?cPath=1_17_22_23">Testcat2</a>

                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
                <li class="list-group-item"><a href="index.php?cPath=1_4">Graphics...

CSS

.list-group-item .toggleMe:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.list-group-item .toggleMe.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
}

JavaScript

//if click chevron's
$('.toggleMeTo').click(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        $(e.target).prev('.list-group').find('.collapse.in').addClass('active');
    });

    $('#accordion').on('hidden.bs.collapse', function (e) {
        $(this).find('.collapse.in').not($(e.target)).removeClass('active');
    });

    $('.toggleMeTo').not(this).each(function () {
        $(this).removeClass('collapsed');
    });
    if ($(this).hasClass('active')) {
        $(this).addClass('collapsed');
    } else {
        $(this).addClass('collapsed');
    }
});

 $('.toggleMeTo').each(function () {
        $(this).toggleClass();
});



$('.toggleMe').click(function (e) {

    var $this = $(this);
    var parent = $this.closest('a').data('parent');
    var actives = parent && $(parent).find('.collapse.in');

    // From bootstrap itself
    if (actives && actives.length) {
        hasData = actives.data('collapse');
        //if (hasData && hasData.transitioning) return;
        actives.collapse('hide');
    }

    var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

    $(target).collapse('toggle');

});