content logo

Bootstrap Accordions:

Bootstrap Accordion Toggle Buttons Inside Tabs

In websites, to increase the use of website elements, we must use their combination. This happened in this code. We have tabs that are next to the title of its icons. Each tab contains several accordions. Accordions also include a set of switch-like buttons. With the help of these accordions, we can place a large amount of content in a small space. The whole theme of these tabs and accordions is the default theme of Bootstrap and white gray.

#Bootstrap Accordion # Accordion for Tab #Switch Button in Accordion #Icon Tab with Accordion

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- Nav tabs category -->
            <ul class="nav nav-tabs faq-cat-tabs">
                <li class="active">
                    <a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-book"></i> Respiratory</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-eye-open"></i> Eye</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-certificate"></i> Skin</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-leaf"></i> General</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-tasks"></i> CNS</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Tab1</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content faq-cat-content">
                <div class="tab-pane active in fade" id="faq-cat-1">
                    <div class="panel-group" id="accordion-cat-1">
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1">
                                    <h4 class="panel-title">
                                        Nested item #1
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-1-sub-1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2">
                                    <h4 class="panel-title">
                                        Nested item #2
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-1-sub-2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="faq-cat-2">
                    <div class="panel-group" id="accordion-cat-2">
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1">
                                    <h4 class="panel-title">
                                        Nested item 1
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-2-sub-1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2">
                                    <h4 class="panel-title">
                                        Nested item #2
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-2-sub-2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
body {
    padding-top: 30px;
}
.faq-cat-content {
    margin-top: 25px;
}
.faq-cat-tabs li a {
    padding: 15px 10px 15px 10px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #777777;
}
.nav-tabs li a:focus,
.panel-heading a:focus {
    outline: none;
}
.panel-heading a,
.panel-heading a:hover,
.panel-heading a:focus {
    text-decoration: none;
    color: #777777;
}
.faq-cat-content .panel-heading:hover {
    background-color: #efefef;
}
.active-faq {
    border-left: 5px solid #888888;
}
.panel-faq .panel-heading .panel-title span {
    font-size: 13px;
    font-weight: normal;
}
$(document).ready(function () {
    $(".collapse").on("show.bs.collapse", function () {
        var id = $(this).attr("id");
        $('a[href="#' + id + '"]')
            .closest(".panel-heading")
            .addClass("active-faq");
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>');
    });
    $(".collapse").on("hide.bs.collapse", function () {
        var id = $(this).attr("id");
        $('a[href="#' + id + '"]')
            .closest(".panel-heading")
            .removeClass("active-faq");
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>');
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
body {
    padding-top: 30px;
}
.faq-cat-content {
    margin-top: 25px;
}
.faq-cat-tabs li a {
    padding: 15px 10px 15px 10px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #777777;
}
.nav-tabs li a:focus,
.panel-heading a:focus {
    outline: none;
}
.panel-heading a,
.panel-heading a:hover,
.panel-heading a:focus {
    text-decoration: none;
    color: #777777;
}
.faq-cat-content .panel-heading:hover {
    background-color: #efefef;
}
.active-faq {
    border-left: 5px solid #888888;
}
.panel-faq .panel-heading .panel-title span {
    font-size: 13px;
    font-weight: normal;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- Nav tabs category -->
            <ul class="nav nav-tabs faq-cat-tabs">
                <li class="active">
                    <a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-book"></i> Respiratory</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-eye-open"></i> Eye</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-certificate"></i> Skin</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-leaf"></i> General</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-tasks"></i> CNS</a>
                </li>
                <li>
                    <a href="#faq-cat-2" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Tab1</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content faq-cat-content">
                <div class="tab-pane active in fade" id="faq-cat-1">
                    <div class="panel-group" id="accordion-cat-1">
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1">
                                    <h4 class="panel-title">
                                        Nested item #1
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-1-sub-1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2">
                                    <h4 class="panel-title">
                                        Nested item #2
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-1-sub-2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="faq-cat-2">
                    <div class="panel-group" id="accordion-cat-2">
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1">
                                    <h4 class="panel-title">
                                        Nested item 1
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-2-sub-1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default panel-faq">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2">
                                    <h4 class="panel-title">
                                        Nested item #2
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                    </h4>
                                </a>
                            </div>
                            <div id="faq-cat-2-sub-2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-2">Fever</div>
                                        <div class="col-sm-3 btn-group" data-toggle="buttons">
                                            <label class="btn btn-primary btn-sm active"> <input type="checkbox" autocomplete="off" checked />Yes </label>
                                            <label class="btn btn-primary btn-sm"> <input type="checkbox" autocomplete="off" />No </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
$(document).ready(function () {
    $(".collapse").on("show.bs.collapse", function () {
        var id = $(this).attr("id");
        $('a[href="#' + id + '"]')
            .closest(".panel-heading")
            .addClass("active-faq");
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>');
    });
    $(".collapse").on("hide.bs.collapse", function () {
        var id = $(this).attr("id");
        $('a[href="#' + id + '"]')
            .closest(".panel-heading")
            .removeClass("active-faq");
        $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>');
    });
});
</script>

</body>
</html>
Preview