Skip to content

Instantly share code, notes, and snippets.

@DroopyTersen
Last active August 29, 2015 14:18
Show Gist options
  • Save DroopyTersen/9b3c8e267da3a94aa549 to your computer and use it in GitHub Desktop.
Save DroopyTersen/9b3c8e267da3a94aa549 to your computer and use it in GitHub Desktop.
SharePoint 2010 jQuery Plugin to make web parts collapsable
(function($){
var options = {
collapse: true,
expandHtml: "▶",
collapseHtml: "▼"
};
var makeCollapsable = function($wpElement, optionOverrides) {
$.extend(options, optionOverrides);
addToggleButton($wpElement);
bindEvents($wpElement);
if (options.collapse) {
collapse($wpElement);
}
};
var bindEvents = function($wp) {
$wp.find(".ms-WPHeader").on("click", function(){
var $this = $(this);
//abort collapse toggle if it was the web part menu dropdown
if ($this.hasClass("ms-WPHeaderTdMenu")) return true;
toggleCollapse($wp);
});
};
var addToggleButton = function($wp) {
var html = "<td align='left' style='width:15px; border-bottom: 1px solid transparent;'>"
html += "<a class='collapseBtn' href='#'>"+ options.collapseHtml + "</a></td>";
$wp.find(".ms-WPHeader").prepend(html);
};
var toggleCollapse = function($wp) {
//If visible collapse else expand
if ($wp.find("[webpartid]").closest("tr").is(":visible")) {
collapse($wp);
} else {
expand($wp);
}
};
var collapse = function($wp) {
$wp.find("[webpartid]").closest("tr").hide();
$wp.find(".ms-WPHeader a.collapseBtn").html(options.expandHtml);
};
var expand = function($wp) {
$wp.find("[webpartid]").closest("tr").show();
$wp.find(".ms-WPHeader a.collapseBtn").html(options.collapseHtml);
};
var findWebParts = function($container) {
return $(".ms-WPHeader").closest(".s4-wpcell-plain");
};
$.fn.spCollapsable = function(options) {
return this.each(function(){
var webparts = findWebParts($(this));
webparts.each(function(){
makeCollapsable($(this), options);
});
});
};
})(jQuery);
//Collapse all web parts
$("body").spCollapsable();
//Only collapse web parts on the right side.
//It just looks for any webparts inside the selector you give it.
$(".ms-rte-layoutszone-outer").spCollapsable();
//Make web parts collapsable, but leave them expanded by default
$("body").spCollapsable({ collapse: false });
//Use a plus and minus sign for the icons instead of the triangle arrows
$("body").spCollapsable({ collapseHtml: "-", expandHtml: "+" });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment