JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            	<h4 class="panel-title">Question #1</a></h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">Answer 1</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            	<h4 class="panel-title"><a href="#collapseTwo" class="collapsed">Question #2</a></h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">Answer #2</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            	<h4 class="panel-title"><a href="#collapseThree" class="collapsed">Question #3</a></h4>

        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">Answer #3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            	<h4 class="panel-title"><a href="#collapseFour" class="collapsed">Question #4</a></h4>

        </div>
        <div id="collapseFour" class="panel-collapse collapse">
            <div class="panel-body">Answer #4</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            	<h4 class="panel-title"><a href="#collapseFive" class="collapsed">Question #5</a></h4>

        </div>
        <div id="collapseFive" class="panel-collapse collapse">
            <div class="panel-body">Answer #5</div>
        </div>
    </div>
</div>

CSS

.panel-heading {
    background-color: #f5f5f5;
}
.panel-group .panel {
    margin-bottom: 0;
    overflow: hidden;
}
.panel-default {
    border-color: #ddd;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
}

JavaScript

$(document).ready(function(){
    $(".toggle_container").hide();

    //Expand/Collapse Individual Boxes
    $("span.expand_heading").toggle(function(){
        $(this).addClass("active"); 
        }, function () {
        $(this).removeClass("active");
    });
    $("span.expand_heading").click(function(){
        $(this).nextAll(".toggle_container:first").slideToggle("slow");
    });

    //Show hide 'expand all' and 'collapse all' text
    $(".expand_all").toggle(function(){
        $(this).addClass("expanded"); 
        }, function () {
        $(this).removeClass("expanded");
    });

    //expand or collapse all boxes
    $(".expand_all").click(function(){
        $(".toggle_container").slideToggle("slow");
    });
});