Bootstrap Snippet Bootstrap Snippet Easy Toogle Button for accordions with effects using HTML CSS jQuery Bootstrap using HTML CSS 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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
        <button id="toogleButton" class="btn btn-default tooglePanels"> 
            <span class="pull-right clickable onToggle tooglePanelButton showToggleButton">
                Hide
                <i class="glyphicon glyphicon-minus"></i>
            </span>
            <span class="pull-right clickable offToggle tooglePanelButton hideToggleButton">
                Show
                <i class="glyphicon glyphicon-plus"></i>
            </span>
        </button>
    </div>
    
    <div class="container-fluid">
        <div class="row">
            <div id="proposalAccordion" class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#proposalAcoordion" href="#collapseContact">Contact</a>
                    </h4>
    
                    </div>
                    <div id="collapseContact" class="panel-collapse collapse in">
                        <div class="panel-body">
                             <p>CONTACT BODY</p>
    
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
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
.tooglePanels {
    outline: 0
}
.tooglePanels:focus {
    outline: 0
}
.tooglePanelButton {
    position: relative;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease
}
.hideToggleButton {
    filter: alpha(opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
    margin-left: -250px
}
.showToggleButton {
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;
    margin-left: 0
}
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
var toogle = (function () {
    return {
        init: function(buttonId, accordionId) {
            var that = this;
            $(buttonId).click(function() {
                that.togglePanels(accordionId, $(buttonId));
            });
        },
        togglePanels : function(accordionId, buttonContainer){
            var onButton = $(buttonContainer).children('.onToggle').eq(0);
            var offButton = $(buttonContainer).children('.offToggle').eq(0);
            
            if (onButton.hasClass('hideToggleButton')){
                this.openAllPanels(accordionId);
                offButton.addClass('hideToggleButton');
                offButton.removeClass('showToggleButton');
                onButton.removeClass('hideToggleButton');
                onButton.addClass('showToggleButton');
            }
            else{
                this.closeAllPanels(accordionId);
                onButton.addClass('hideToggleButton');
                onButton.removeClass('showToggleButton');
                offButton.addClass('showToggleButton');
                offButton.removeClass('hideToggleButton');
            }
            
        },
        openAllPanels : function(aId) {
            $(aId + ' .panel-collapse:not(".in")').collapse('show');
        },
        closeAllPanels : function(aId) {
            $(aId + ' .panel-collapse.in').collapse('hide');
        }
   }
}) ();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Snippet Easy Toogle Button for accordions with effects using HTML CSS jQuery Bootstrap"
Bootstrap 3.0.0 Snippet by KingDavid14

Related: See More

Questions / Comments:

"Bootstrap Snippet Easy Toogle Button for accordions with effects using HTML CSS jQuery Bootstrap" Bootstrap 3.0.0 Snippet by KingDavid14

Related: See More

Questions / Comments:

"Bootstrap Snippet Easy Toogle Button for accordions with effects using HTML CSS jQuery Bootstrap"
Bootstrap 3.0.0 Snippet by KingDavid14