$scope.collapseBar = function (ev, id) {
var _toggleClass = function (elem, parent) {
var _toggle_full = 'glyphicon-resize-full',id,
_toggle_small = 'glyphicon-resize-small',
_memberEvent_prefix = '#Panel_MemberEvents_Collapse_';
if (id) _id = _memberEvent_prefix + id;
if (elem.hasClass(_toggle_full) || elem.hasClass(_toggle_small)) {
elem.toggleClass(_toggle_full + ' ' + _toggle_small);
if (_id) $(_id).toggleClass('in');
return true;
}
}
if (ev && ev.target) {
$(ev.target).each(function () {
if (_toggleClass($(this), true)) return;
else if ($(this).children().length > 0) {
$(this).children().each(function () {
_toggleClass($(this));
});
}
});
}
};And the html mark up:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Collapsible Accordion</title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<style>
.DemoBS2{
margin:20px;
}
</style>
<body>
<div class="DemoBS2">
<div class="panel-group" id="memberDetail-collapseTitle">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Accordion 1
<span class="pull-right">
<a data-toggle="collapse" ng-click="collapseBar($event)" data-parent="#memberDetail-collapseTitle"
href="#memberDetail-collapse">
<span class="btn btn-default btn-sm" title="Collapse">
<span class="glyphicon glyphicon-resize-small"></span>
</span>
</a>
</span>
</h4>
</div>
<div id="memberDetail-collapse" class="panel-collapse collapse in">
<div class="panel-body">
something here to expand or collapse ....
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
the title to show here <span class="pull-right commandIcons">
<span data-href="#memberDetail-collapse" onclick="g_collapseBar($(this))" class="caatCollapse btn btn-default btn-sm" ng-disabled="isReadonly">
<span class="glyphicon glyphicon-resize-full"></span>
</span>
</span>
</h4>
</div>
<div id="accordionTwo" class="panel-collapse collapse">
<div class="panel-body">
Change does not roll in on the wheels of inevitability,
but comes through continuous struggle.
And so we must straighten our backs and work for
our freedom. A man can't ride you unless your back is bent.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
ADASDASFDSFDS
<span class="pull-right">
<button data-targetpanel="#memberDetail-collapse" onclick="return collapseBar($(this));" class="btn btn-default btn-sm" title="Expand or collapse">
<span class="glyphicon glyphicon-resize-small"></span>
</button>
</span>
</h4>
</div>
<div id="accordionThree" class="panel-collapse collapse">
<div class="panel-body">
You must take personal responsibility.
You cannot change the circumstances,
the seasons, or the wind, but you can change yourself.
That is something you have charge of.
</div>
</div>
</div>
</div></div>
</body>
</html>And Jquery toggle API, with no parameters, the .toggle() method simply toggles the visibility of elements:
$( ".target" ).toggle();Collapse and Expand using JQuery toggle():
g_collapseBar = function (element) {
var $t = element;//$(this);
var _toggle_full = 'glyphicon-resize-full',
_toggle_small = 'glyphicon-resize-small';
$($t.attr("data-href")).slideToggle();
$t.find('span.glyphicon').toggleClass(_toggle_full).toggleClass(_toggle_small);
};
collapseBar = function ($t) {
$($t.attr("data-targetPanel")).slideToggle();
$t.find('span.glyphicon').toggleClass('glyphicon-resize-full').toggleClass('glyphicon-resize-small');
return false;
};
