I've made another site modification right on the heels of a friend asking me "when do you decide your site is done and then are simply adding product?" In my case the answer is never, because my site is part of the product!


The product addition I've now deployed is getting rid of that huge long list of links in the right-hand sidebar. There are 71 of them loosely categorized, but a huge list no matter how you look at it. And no I didn't really get rid of them, but I got rid of what looks like clutter over there by rolling the lists up.

I had looked at Steve Orr's VisiPanel, and like the way it rolls up, and the color is very cool, but I don't think it fits my site. And by the time I remove the color and borders, how much of it am I using?

I thought about simply using a link and a panel, but then I have to have server-side code to deal with showing/hiding the panel, and I was hoping to avoid making large changes to what's already there.

Then I remembered MetaBuilders, and checked out their ExpandingButtons control. That ended up being exactly the solution.


I unzipped everything, then added the ExpandingButtons.dll to my VS2005 Toolbox palette by doing right-click "Choose Items..." on the General tab, and browsed to the Metabuilders.WebControls.ExpandingButtons.dll file. This added 4 icons to the Toolbox: ExpandingButton, ExpandingCheckBox, ExpandingImageButton, and ExpandingLinkButton:



The only other thing I had to do to accommodate the ExpandingButtons control was to put their Java Script in the head of my master page.

Since I already had labels as headers for each section of links, I wanted to keep that look, so I didn't want a button or checkbox. The choices were then a link or an image. I added the imagebutton behind my current label and used the up and down gifs they have on their sample page. This was very easy to configure in the client-side code that got added when I dragged the control in.

Just before the close of the mbeb:ExpandingImageButton, I hit the spacebar and got Intellisense on the control. I found "ContractedImageUrl" and "ExpandedImageUrl" which I pointed at the two gifs appropriately.

While looking at those two, I found a "ControlToToggle" which I pointed at the DataList control. I rebuilt, the down arrow was showing next to my text, and when I clicked it, the data appeared... very cool and certainly a drop-in!

My perception looking at it then was that I'd think the text would cause it to hide and show the list of links, so I tried out the ExpandingLinkButton as well. This worked just as easily, with the only change being populating the "ContractedText" and "ExpandedText", and I did that from the server-side code in place of populating the label I had in there previously.

The problem then was I had two discreet links and it was obvious they were, and that bugged me. I thought about using an extended character to append onto the label string, but could not find one in the font I am using, and even if I'd have figured out how to configure it all with a font switch to WingDings or something, I'd still be at the mercy of someone having it installed, so I abandoned that thought.

Finally it hit me that I just needed to make the image for the ExpandingImageButton also include the text. So I backed off to where I had a label and an ExpandingImageButton with the up/down arrows for each entry, and I ran it. Then I captured the text and arrow for both states for every section.



Using Paint Shop Pro, I made a layered image for each heading that contained the text and up/down image pairs. I exported jpgs of each, and uploaded them, then modified the ExpandingLinkButton entries to use my new images, and it's all good.


I'd highly recommend Metabuilders. I'm using 3 or 4 of their controls in various applications and I like how easy they are to use.