JQuery Collapsible Block with Cookies

Required code for implementing:

A template file to create in your theme folder

block.tpl.php

<?php
// $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $
?>
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">

<?php if (!empty($block->subject)): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

  <div class="content"><?php print $block->content ?></div>
</div>

A JavaScript to put in your theme /js folder

blocks.toggle.js

// your everyday closure
(function($) {
  // put this behavior in the "toggleblock" namespace
  Drupal.behaviors.toggleblock = function(context) {
    // Set the link for the text early on so we only run it once
    var linktext = Drupal.t('Show/Hide');
    // iterate over the toggleblock settings array
    $.each(Drupal.settings.toggleblock, function(i, elId) {
      // select the element that matches the ID, excluding already
      // processed ones and those that aren't in the current context
      // the each here is just to nulify things when there are no results
      $('#' + elId + ':not(.toggleblock-processed)', context).each(function() {
        // set the cookie variable as a boolean for this particular one
        // if it isn't set, it'll default to showing the block
        // would prolly be easier to work with booleans instead of
        // 'shown' and 'hidden'
        var cookie = $.cookie(elId) != 'hidden',
              $this = $(this);
        // construct the link
        $('<a href="#" class="toggleblock-link">')
        // add the previously cached linktext
        .text(linktext)
        // bind a click handler
        .bind('click', function() {
          // cache some things we might need
          var $this = $(this),
                $block = $this.parent(),
                $content = $block.children('.content'),
                collapsed = $block.hasClass('collapsed');
          // stop the current animation, force it to its end point and
          // toggle its display, setting a collapsed class and
          // the cookie on the callback
          $content.stop(true).toggle('slow', function() {
            $block.toggleClass('collapsed');
            $.cookie($block.attr('id'), collapsed ? 'shown' : 'hidden');
          });
          return false;
        })
        // add it to the block, right before the title
        // (or right before the content if there is no title)
        .prependTo($this);
        // match this block's state with the cookie
        if (!cookie) {
          $this.hide().addClass('collapsed');
        }
      });
    });
  }
})(jQuery);

A preprocess function to add in your theme template.php file

Code to add in template.php

<?php
function garland_preprocess_block(&$vars) {
  $block = $vars['block'];
  if (user_access('content')) {
    drupal_add_js(path_to_theme() . '/js/jquery.cookie.js');
    drupal_add_js(path_to_theme() . '/js/blocks.toggle.js');
    $settings = array(
      'toggleblock' => array(
        'block-' . $block->module . '-' . $block->delta,
      ),
    );
    drupal_add_js($settings, 'setting');
  }
}
?>

The jQuery file

You can download the file at: COOKIE, the jQuery Plugin page.

Note: The code works but still have some buggy behave:

1. After some testing Show/Hide Block , the block/s disappear. it look that a settings conflict exist.

FYI Demonstration Site:

For those that would like to see how this small project works at actual development stage you can visit Drupal 6.17 Sandbox Site,
please use --- user: demo and password: demo --- to log in.

references:

1. jQuery toggle & cookies

I think we should find another approach with JQuery Collapsible Block with Cookies
I did a bit of searching and with your help we should be better off with

JQuery Toggle-block with Cookies

So I have found some help (here) Simple Toggle with CSS & jQuery

The code parts that should be modified for working in Drupal with Jquery are:

1. Code for inserting the jquery-toggle themename_preprocess_function in the template.php file

   function themename_preprocess_block(&$vars) {
     $block = $vars['block'];
     if (user_access('access content')) {
       drupal_add_js(path_to_theme() . '/js/toggle.js');
       $settings = array(
         'toggleblock' => array(
           'block-' . $block->module . '-' . $block->delta,
         ),
       );
       drupal_add_js($settings, 'setting');
     }
   }
   

2. the to trasform toggle.js file

   function rC(nam) {
     var tC = document.cookie.split('; '); 
       for (var i = tC.length - 1; i >= 0; i--) {var x = tC[i].split('='); 
        if (nam = x[0]) return unescape(x[1]);} return '0';
   } 
   
   function wC(nam,val,expires) { 
         if (!expires) expires = new Date(); 
          expires.setDate(expires.getDate()+1); 
            document.cookie = nam + '=' + escape(val)+ '; 
              expires='+ expires.toGMTString()+ '; path=/';
   } 
   
   function thisPage() {
     var page = location.href.substring(location.href.lastIndexOf('\/')+1); 
       pos = page.indexOf('.');
         if (pos > -1) {page = page.substr(0,pos);
   
   } 
   return page;
   
   } 
   
   function toggle(nam,expires) {var val = rC(nam); 
     if (val=='1') {wC(nam,'0',expires); 
      return false;} wC(nam,'1',expires); return true;
   }
   
   // Drupal behavior toggleblock
   
   var expires = 0;
   // note that by default the script saves the cookie for one day
   // if you wish to keep the cookie for a longer or shorter period then
   // set the expires variable to the required expiry date instead of 0.
   
   (function($) {
     // put this behavior in the "toggleblock" namespace
     Drupal.behaviors.toggleblock = function(context) {
       // Set the link for the text early on so we only run it once
       var linktext = Drupal.t('Show/Hide');
       // iterate over the toggleblock settings array
       $.each(Drupal.settings.toggleblock, function(i, elId) {
         // select the element that matches the ID, excluding already
         // processed ones and those that aren't in the current context
         // the each here is just to nulify things when there are no results
         $('#' + elId + ':not(.toggleblock-processed)', context).each(function() {
           // set the cookie variable as a boolean for this particular one
           // if it isn't set, it'll default to showing the block
           // would prolly be easier to work with booleans instead of
           // 'shown' and 'hidden'
           var cookie = $.cookie(elId) != 'hidden',
                 $this = $(this);
           // construct the link
           $('<a href="#" class="toggleblock-link">')
           // add the previously cached linktext
           .text(linktext)
           // bind a click handler
           .bind('click', function() {
             // cache some things we might need
             var $this = $(this),
                   $block = $this.parent(),
                   $content = $block.children('.content'),
                   collapsed = $block.hasClass('collapsed');
             // stop the current animation, force it to its end point and
             // toggle its display, setting a collapsed class and
             // the cookie on the callback
             $content.stop(true).toggle('slow', function() {
               $block.toggleClass('collapsed');
               $.cookie($block.attr('id'), collapsed ? 'shown' : 'hidden');
             });
             return false;
           })
           // add it to the block, right before the title
           // (or right before the content if there is no title)
           .prependTo($this);
           // match this block's state with the cookie
           if (!cookie) {
             $this.hide().addClass('collapsed');
           }
         });
       });
     }
   })(jQuery);
   
   window.onload = start;
   

3. This JQuery code must be implemented some-where

   $(document).ready(function(){
   
   	//Hide (Collapse) the toggle containers on load
   	$(".toggle_container").hide(); 
   
   	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
   	$("h2.trigger").click(function(){
   		$(this).toggleClass("active").next().slideToggle("slow");
   	});
   
   });
   

This is a development tryout, so it does not work now, I'm just guessing.
_{Authors of relative codes are being contacted}