I got many feedbacks in my previous posts "Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel" & "GridView Grouping Master/Detail Drill Down using AJAX and jQuery" asking to for toggle all (Expand All or Collapse All) feature in CollapsiblePanelExtender as well as to in jQuery. Actually I didn't have much time to walkthrough this and provide a demo about it.
Today I got a chance to write few code snippet to run this feature. It was very simple for both jQuery also for ASP.NET AJAX.
I'll start with ASP.NET AJAX [View Demo]. If you wish to apply Toggle All functionality that will collapse or expand all panels on your page you can write code close to this and get it working perfectly:
function toggleAll(collapse) {
var components = Sys.Application.getComponents()
for (var i in components) {
if (AjaxControlToolkit.CollapsiblePanelBehavior.isInstanceOfType(components[i])) {
components[i].set_Collapsed(collapse);
}
}
}At line 2 I am getting all component created on the page. In line 3 I am looping through all these components. In line 4 I am checking if these component are of Type CollapsiblePanelBehavior. If yes, in line 5 I'm expanding or collapsing each panel based on the passed parameter.
Very simple! but has one issue. What if you want to toggle group of panels on the page and leave the other panels! Then you need some kind of grouping. In my case I don't have this need, however I applied grouping by checking ID of the collapsible element for certain string pattern using regular expression
function toggleAll(collapse) {
var components = Sys.Application.getComponents()
for (var i in components) {
var exp = new RegExp("pnlOrders");
var match = exp.exec(components[i].get_element().id)
if (AjaxControlToolkit.CollapsiblePanelBehavior.isInstanceOfType(components[i])) {
if (match && match.length > 0) {
components[i].set_Collapsed(collapse);
}
}
}
}In the above code I am checking if the collapsible element has id that contains "pnlOrders". This way If there are any other collapsible panel in the page that doesn't have a collapsible element that contains "pnlOrders" string in its id will apply this toggle feature. [
View Demo]
In jQuery It was very simple too [View Demo], but required some customization in the code as my demo wasn't based on pre-built plug-in or widget on jQuery, it was purely customized jQuery code to apply sliding collapse & expand behaviour. Unlike ASP.NET AJAX where I already had a component of Type CollapsiblePanelBehavior.
My jQuery code was simple anyway:
function toggleAll(collapse) {
$('.group').each(function(i) {
var $this = $(this);
var $details = $this.next();
if ($details.html() == "") {
if (!collapse) {
$this.click();
}
}
else {
var src = $this.children()[0].src;
if (collapse) {
$details.slideUp();
if (src.endsWith("minus.png"))
$this.children()[0].src = src.replace('minus.png', 'plus.png');
}
else {
$details.slideDown();
if (src.endsWith("plus.png"))
$this.children()[0].src = src.replace('plus.png', 'minus.png');
}
}
})
}At line 2 I get all elements with css class "group". This is equivalent to Expand/Collapse Control -The element that trigger expand or collapse on collapsible element- referenced here as
$this. In line 5 I check if the element was expanded before or not by checking if it contains any HTML. If the collapsible element
$details does not contain any HTML I check if I am triggering to expand all then I just call "click" function of the Expand/Collapse control to expand the collapsible element. If the element was already expanded before I just check if I am triggering expand all or collapse all and slideUp or slideDown the collapsible element. Also I manage to display the correct image on each case. [
View Demo]
You can check out the demos and download the code for more clarification.