I have been pretty pleased with the collapsible widgets extension I wrote earlier.  After a while I started thinking about improving this extension, specifically to support remembering what a users expanded widget was between page refreshes.  I also wanted to move towards an accordion style to make the widgets automatically collapse when expanding another widget.  I did some looking at how to best implement this and ran across the  JQuery library.  This library has some pretty awesome features that I plan on using in future Extensions.  Hopefully BlogEngine will some how incorporate this functionality in the future so this extension isn’t necessary.

So as an upgrade to my original extension I make available the next level in collapsible widgets…  To be clear the following improvements can be found with this version of the extension:

• Remembers your expanded widget during your session
• Accordion based expansion to keep the widget zone collapsed
• Based on the JQuery library which can be used for other features.

The first step is to copy two JavaScript files (jquery-pack.js + animatedcollapse.js) and add them into the ~/js folder.  If you want the scripts in a different folder then you will need to adjust the extension file with the correct path to the script files.

As in the previous version I had to reconfigure how the widget was rendered by this class and then the magic of JavaScript and style would take care of the rest.  So update the section of the Render routine in the ~/App_Code/Controls/WidgetBase.cs file from the following…

if (ShowTitle)
  sb.Append("<h4>" + Title + "</h4>");
else
  sb.Append("<br />");

sb.Append("<div class=\"content\">");

…to look like the following…

string _name = this.Name.Replace(" ", string.Empty).ToLowerInvariant() + "_content";

if (ShowTitle)
{
    sb.Append("<h4 ><a title=\"Click to expand/collapse this widget\" onclick=\"javascript:animatedcollapse.toggle('" + _name + "')\" href=\"javascript:void(0)\">" + Title + "</a></h4>");
    sb.Append("<script type=\"text/javascript\">animatedcollapse.addDiv(\"" + _name + "\", \"persist=1,group=widget\")</script>");
    sb.Append("<div id=\"" + _name + "\" class=\"" + _name + "\">");
}
else
{
    sb.Append("<br />");
    sb.Append("<div id=\"" + _name + "\">");
}

Finally you need to copy the extension file named animatedcollapse.cs into the ~/App_Code/Extensions folder.

After that you should be good to go…  If you have any problems or questions feel free to drop me a line…

AnimatedCollapse.zip