JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css">
    <div id="myGroup">
        <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
        <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
        <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
        
            <div class="collapse indent" id="keys">
                keys
            </div>
        
            <div class="collapse indent" id="attrs">
                attrs
            </div>
        
            <div class="collapse" id="edit">
                edit
            </div>
    </div>

CSS

.collapse.in { min-height: 50px;border: 1px solid blue; }

JavaScript

var $myGroup = $('#myGroup');
    $myGroup.on('show','.collapse', function() {
        $myGroup.find('.collapse.in').collapse('hide');
    });