Creating Collapsible Bootstrap Panels with jQuery

A tiny jQuery plugin that extends the Bootstrap's panel component to make it collapsible and closeable as a widget.

How to use it:

1. Include the jQuery library and the Twitter Bootstrap 3 in the web page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

2. Include the Font Awesome 4 for the control icons.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

3. Create a Bootstrap panel as a widget following the Html structure like this.

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title"> Panel Widget Title
      <div class="pull-right"> <a href="#" data-perform="panel-dismiss" class="btn btn-primary btn-xs pull-right"><i class="fa fa-times"></i></a> <a href="#" data-perform="panel-collapse" class="btn btn-primary btn-xs pull-right"><i class="fa fa-minus"></i></a> </div>
    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body"> Panel Widget Body </div>
  </div>
</div>

4. The javascript to active the plugin.

$(document).ready(function() {

(function($, window, document){
var panelSelector = '[data-perform="panel-collapse"]';

$(panelSelector).each(function() {
var $this = $(this),
parent = $this.closest('.panel'),
wrapper = parent.find('.panel-wrapper'),
collapseOpts = {toggle: false};

if( ! wrapper.length) {
wrapper =
parent.children('.panel-heading').nextAll()
.wrapAll('<div/>')
.parent()
.addClass('panel-wrapper');
collapseOpts = {};
}
wrapper
.collapse(collapseOpts)
.on('hide.bs.collapse', function() {
$this.children('i').removeClass('fa-minus').addClass('fa-plus');
})
.on('show.bs.collapse', function() {
$this.children('i').removeClass('fa-plus').addClass('fa-minus');
});
});
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
var wrapper = parent.find('.panel-wrapper');
wrapper.collapse('toggle');
});
}(jQuery, window, document));
  

(function($, window, document){
var panelSelector = '[data-perform="panel-dismiss"]';
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
removeElement();

function removeElement() {
var col = parent.parent();
parent.remove();
col.filter(function() {
var el = $(this);
return (el.is('[class*="col-"]') && el.children('*').length === 0);
}).remove();
}
});
}(jQuery, window, document));
  
});

---

This awesome jQuery plugin is developed by jenniferperrin. For more Advanced Usages, please check the demo page or visit the official website.