Last active
August 29, 2015 14:18
-
-
Save DroopyTersen/9b3c8e267da3a94aa549 to your computer and use it in GitHub Desktop.
SharePoint 2010 jQuery Plugin to make web parts collapsable
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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