JQuery
Notes
- If you are using a core theme such as Garland, you need to create your own theme. Even if you're only modifying the theme for the purpose of this tutorial (and of course, to get collapsible blocks). It's always recommended that you do not overwrite any sort of core Drupal files.
- This is untested in Drupal 5
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):
The JQuery Code
First. We want to download the JQuery Cookie Plugin (http://plugins.jquery.com/project/cookie) which will allow us to remember the state of the blocks (shown/hidden). Now upload that file to your theme's directory. Create a new file in a text editor. Call this file blocks.toggle.js. Type the following:
function toggle_block(id, target_id){
}
This function accepts two parameters. id and target_id. id is the clickable item that controls the collapsing/expanding. The variable target_id is the item that is shown/hidden. In this case the block's content.
Collapsible Blocks with Cookies
Want to create collapsible blocks in Drupal 6 that actually remember the state the user left them in?
It's pretty easy with JQuery which is built-in to Drupal 6.
Using JQuery with Drupal
Tutorials on how to extend usability using JQuery and Drupal
