Modifying block.tpl.php
We're going to be working with path_to_your_theme/blocks.tpl.php from your default Drupal 6 installation. Open up path_to_your_theme/blocks.tpl.php in TextEdit or your favorite editor.
Firstly we need to add the cookies javascript file and our blocks.toggle.js file to the list of scripts in the <head> tag. To do this we'll use Drupal's built in function drupal_add_js.
In the file path_to_your_theme/blocks.tpl.php put in the following code (I usually put drupal_add_js or drupal_add_css functions at the top of files):
<?php
drupal_add_js(path_to_theme() . '/jquery.cookie.js');
drupal_add_js(path_to_theme() . '/blocks.toggle.js');
?>
Save, Upload and view the source. You will now see that both scripts have been added to the <head> tag of your HTML document.
In your blocks.tpl.php file, find this line:
<?php if (!empty($block->subject)): ?>
Replace the line under it:
<h2><?php print $block->subject ?></h2>
with this line:
<h2><a href="#" id="toggle-<?php print $block->module .'-'. $block->delta ?>"><?php print $block->subject ?></a></h2>
What this does is create the selector for JQuery's click event, dynamically.
Now replace this line:
<div class="content"><?php print $block->content ?></div>
With this:
<div class="block-content" id="block-<?php print $block->module .'-'. $block->delta; ?>">
<?php print $block->content ?>
</div>
Now we have our id's being built dynamically and we're almost ready to finish off.
Go back up to the following part of the page:
<?php
drupal_add_js(path_to_theme() . '/jquery.cookie.js');
drupal_add_js(path_to_theme() . '/blocks.toggle.js');
?>
Add the following code underneath the last drupal_add_js line:
$js = '$(document).ready(function(){' .
' toggle_block(\'toggle-' . $block->module .'-'. $block->delta . '\', \'block-' . $block->module .'-'. $block->delta . '\');' .
'});';
drupal_add_js($js,'inline');
Your code should now look like this:
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">
<?php if (!empty($block->subject)): ?>
<h2><a href="#" id="toggle-<?php print $block->module .'-'. $block->delta ?>"><?php print $block->subject ?></a></h2>
<?php endif;?>
<div class="block-content" id="block-<?php print $block->module .'-'. $block->delta; ?>">
<?php print $block->content ?>
</div>
</div>
This simply fires up the 'toggle_block' when the page loads.
Now upload the file block.tpl.php to 'path_to_your_theme/block.tpl.php', clear your site's cache and voila! You should now have 'smart' collapsible blocks on your site!
| Attachment | Size |
|---|---|
| block.tpl_.php.txt | 464 bytes |