Chris Blankenship's Ramblings

Do you really want to see all of my side panel sections, lie my blogroll and Delicious tags?  I would bet that most people would rather look at the blog entries and only see the panel details when it interests them.  If you feel the same way then you would understand why I want to implement collapsible panels.  I first accomplished this by using Javascript code I found on Dynamic Drive called Animated Collapsible DIV.  This worked out pretty well but there were things about using this code that bothered me such as how the collapsed setting doesn’t apply until the page fully loads.  I also didn’t like the steps necessary to implement this Javascript solution.

Luckily I ran across a collapsible method that works much better and which should allow it to work on most all browsers.  I didn’t see it published as a complete package and I’m not sure how to credit the original author.  I can only say that I found it on the DasBlog Demo Blog using the BlogXP theme.  A quick view of the source code and I was able to extract the necessary pieces to add it to my blog…  If you want to see it in action then look to the left and you will see something like the following:

You will notice that the up/down arows change to reflect the correct direction.  So let’s have a look at how to implement this code.

To implement the collapsible sections you need to add an image that controls the up/down function and a div section that will be collapsed:

<a title="Click to collapse or expand this item" onclick="return webpartToggleExpansionStatus('MySection');" class="webpartToggleLink" href="#">
  <img id="MySectionImage" title="Click to collapse or expand this item" src="down.png" border="0" /></a>
<div id="MySectionPanel" class="webpartCollapsed">
  <p>Text to be collapsed</p>
</div>

Some things worth mentioning. 

• The MySection name needs to be the same for the entire section
• The word ‘Image’ needs to be added to the name of your IMG id
• The word ‘Panel’ needs to be added to the name of your DIV id
• You can determine default value by modifying the DIV class (webpartCollapsed or webpartExpanded)
• Don’t forget to update the default IMG to match the Collapsed or Expanded settings

And that’s about it… for a complete example of how I implemented this you can simply right click on this entry and select ‘View Source’.  Let me know if you find this useful…

CollapsibleSections.rar (1.80 kb)