Bootstrap Snippet Accordion using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <div class="container">   
    <div class="row">
        <div class="col-md-12">
            <!-- 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-user"></i>Академия</a></li>
                <li><a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-plus"></i>Университет</a></li>
                <li><a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-delete"></i>Институт</a></li>
                  <li><a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-leaf"></i>Филиал</a></li>
                    <li><a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-user"></i>Хорижий ОТМ ва филиаллар</a></li>
                     <li><a href="#faq-cat-1" data-toggle="tab"><i class="glyphicon glyphicon-user"></i>Нодавлат ОТМ</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">
                                        ОТМ 1
                                        <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    padding-top: 30px;
}
.btn-wrapper .boxed-btn {
    margin: 0 10px;
    border: none;
    width: 125px;
    height: 40px;
    line-height: 55px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    background-image: -moz-linear-gradient(50deg, #5e2ced 0%, #9749f8 100%);
    background-image: -webkit-linear-gradient(
50deg, #5e2ced 0%, #9749f8 100%);
    background-image: -ms-linear-gradient(50deg, #5e2ced 0%, #9749f8 100%);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    text-transform: capitalize;
}
.boxed-btn.btn-rounded {
    border-radius: 30px;
}
.btn-wrapper .boxed-btn {
    margin: 0 10px;
    border: none;
    width: 120px;
    height: 40px;
    line-height: 55px;
    position: relative;
    z-index: 1;
    overflow: hidden;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(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>');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Accordion"
Bootstrap 3.3.0 Snippet by farayov

Related: See More

Questions / Comments:

"Accordion" Bootstrap 3.3.0 Snippet by farayov

Related: See More

Questions / Comments:

"Accordion"
Bootstrap 3.3.0 Snippet by farayov