Tonight I was looking at the Widget framework on BlogEngine.NET and decided that it really needed the ability to have collapsible sections.  Similar to how my blog is currently configured, sections can be expanded and/or collapsed in order to allow the reader to hide info that is of no interest to them.  Often I go to someone’s blog and find so many things on the page that I get overwhelmed.

I found the meat of the Widget framework contained in the WidgetBase.cs.  All I had to do was 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 first I had to update a 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 include the following…

if (ShowTitle) {
  sb.Append("<h4>");
  sb.Append("<a title=\"Click to collapse or expand this item\" onclick=\"return webpartToggleExpansionStatus('" + Title + "');\" class=\"webpartToggleLink\" href=\"javascript:void(0)\">");
  sb.Append(Title);
  sb.Append("<img id=\"" + Title + "Image\" style=\"vertical-align: bottom;\" title=\"Click to collapse or expand this item\" alt=\"exp/col\" src=\"" + Utils.RelativeWebRoot + "pics/up.png\" border=\"0\" />");
  sb.Append("</a>");
  sb.Append("</h4>");
}
else { 
  sb.Append("<br />"); }

sb.Append("<div class=\"content\" id=\"" + Title + "Panel\" class=\"webpartExpanded\" >");

Once this was done it was necessary to load the style and script components.  To accomplish this I just created an Extension that will automatically add the information to the page during the render process.  Lastly I needed to add a couple of images into the ~/pics folder that will reflect whether you can expand or collapse a widget.

With those few steps you can get the basics of the functionality.  I plan on working more with this feature to allow for writing the user preferences into a cookie for return visits, and adding the ability to individually choose which sections are collapsed and which are expanded by default.

So tell me, is this useful to anyone other than me?  Is this worth the time spent, and more importantly… would anyone want and/or use the suggested improvements I just mentioned?

UPDATE Aug 11th: I noticed some strangeness within the Widget framework and finally figured out what the problem was. It turns out I had added a duplicate class name and it wasn’t picking it up correctly.  I have corrected this and a couple of other little things and updated the source files. 

DropDownWidget.zip