Collapsable side blocks

Collapsable DHTML animated side blocks as seen here: http://www.power-systems.com

Put collapse.png and expand.png in your images directory

Unzip and put animatedcollapse.js in your jscripts/jquery directory

Modify templates:
Templates » Default » site » site_menu_header (your may not be Default)
HTML Part
Before:

HTML:

<ul class="navlist">

Add:

HTML:

</script>
<script type="text/javascript" src="/jscripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/jscripts/jquery/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
}
animatedcollapse.init()

</script>

Submit

Templates » Default » site » site_block
HTML Part:
Replace with:

HTML:

<script type="text/javascript">
animatedcollapse.addDiv('{$blockname}', 'fade=1,persist=1')
</script
<!-- Template: site_block -->
<h1>
<a href="#" rel="toggle[{$blockname}]" data-openimage="/images/collapse.png" data-closedimage="/images/expand.png"><img src="/images/collapse.png" border="0"  style="margin-right:5px"/></a>
{$insert['block_name']}</h1>
<div class="content" id="{$blockname}">
{$insert['block_content']}
</div>

<br />

PHP Part:
Add:

PHP:

$sPattern = '/\s*/m';
$sReplace = '';
$blockname = preg_replace( $sPattern, $sReplace, $insert['block_name'] );

Submit

Hmm nice modification. Thank you.