Creating Collapsible Bootstrap Panels with jQuery
File Size: | 2.42 KB |
---|---|
Views Total: | 13289 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.