Bootstrap Snippet Panel Expand using HTML CSS Bootstrap Javascript

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12"> 
    
            <div class="panel panel-primary">
            
                <div class="panel-heading">
                    <h3 class="panel-title">
                        SERIES: Season Subscription (Fixed) - 3 Vouchers
                    </h3>
                    <span class="pull-right btn-click">
                        <i class="fa fa-chevron-circle-up"></i>
                    </span> 
                </div>
                
            <div class="clearfix"></div>
            
            <div class="panel-body">
                            
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Column 1</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td>Data</td>
                                <td>Content</td>
                            </tr>
                            <tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
.panel { margin-top: 25px; }
.btn-click
{
margin-top: -27px;
font-size: 26px;
cursor: pointer;   
}
.btn-click > .fa.fa-chevron-circle-up
{
color: rgba(249, 249, 249, .5);
}
.btn-white 
{
color: #5e5e5e;
background-color: #fff;
border: 1px solid #e5e9ec;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).on('click', '.btn-click', function(e){
    var $this = $(this);
    if(!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
    } else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
    }
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Panel Expand"
Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Panel Expand" Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Panel Expand"
Bootstrap 3.2.0 Snippet by escapedlion