JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
    <div class="panel panel-default panel-custom">
        <div class="panel-heading" data-toggle="collapse" data-target='#collapse1'>
             <h6 class="panel-title collapsed" data-toggle="collapse" data-target='#collapse1'>First section</h6>
        </div>
        <div class="panel-collapse collapse" id="collapse1">
            <div class="panel-body">Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
        </div>
    </div>
    <div class="panel panel-default panel-custom">
        <div class="panel-heading" data-toggle="collapse" data-target='#collapse2'>
             <h4 class="panel-title collapsed" data-toggle="collapse" data-target='#collapse2'>Second section</h4>
        </div>
        <div class="panel-collapse collapse" id="collapse2">
            <div class="panel-body">Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
        </div>
    </div>
</div>
<br/>
<br/>
<button type="button" class="btn btn-primary" id='all'>Show All</button>

CSS

.panel-heading {
    cursor: pointer;
}

.panel-title:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: left;        /* adjust as needed */
    margin-right: 4px;
    color: grey;         /* adjust as needed */
}
.panel-title.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

#main{
  margin-top: 20px;
}

.panel-custom > .panel-heading{
  padding: 8px 8px;
}
.panel-custom .panel-title {
  font-size: 12px;
}
.panel-group .panel-custom {
  border-radius: 0px;
}
.panel-group .panel-body{
  border: 0px;
}
.btn {
  
}

JavaScript

$('#all').click(function () {
    if ($(this).text().indexOf('Show') >= 0) {
        $('.panel-collapse').collapse('show');
        $(this).text('Hide All');
    } else {
        $('.panel-collapse').collapse('hide');
        $(this).text('Show All');
    }
});