modifying a template and adding jQuery to it

Rather than modifying the template, since you’re going to need jQuery anyway, you can do this..

Add to the functions.php

add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', get_bloginfo( 'stylesheet_directory' ) . '/blogroll-toggle.js', array( 'jquery' ) );
}

Or create a new folder in the wp-content/plugins/ folder, create a file inside the new folder, eg. blogroll-plugin.php, and add the following.

<?php
/*
    Plugin Name: Suffusion Blogroll Toggles
*/
add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', plugins_url( '/blogroll-toggle.js', __FILE__ ), array( 'jquery' ) );
}

The function will basically enqueue in the script whenever a page is loaded with the bookmarks template attached to it. jQuery is set as a dependancy for the script, so there’s no need to load that seperately.

Create a file in the theme(or plugin) folder and call it blogroll-toggle.js, then place the following code into that file.

jQuery(document).ready( function($) {
    // Hide the blogroll lists
    $('div.entry ul.blogroll').hide();
    // Attach a click function to the headings
    $('div.entry h4').click( function() {
            // Make sure we're targeting the blogroll heading, if not, stop here(do nothing)
        if( !$(this).next('ul.blogroll') )
            return false;
            // Toggle the blogroll list that follows the heading
        $(this).next('ul.blogroll').toggle();
    });
});

The jQuery is untested, but it should work(i’ve done toggles dozens of times).

NOTE: If using as a plugin, remember to activate it like you would any other plugin.

Any problems with the code, let me know. 🙂