Community Documentation

Make sidebar blocks collapsible

Last updated December 21, 2008. Created by stokito on December 5, 2006.
Edited by Wolfflow, aj045, klokop. Log in to edit this page.

Thought I'd share this:
Here's how I made the Block Div's hidable using javascript (and scriptaculous.js). Put it somewhere in the page, or in a separate file, that gets included in the page..

<?php
<script language="javascript" type="text/javascript">
// make blocks collapse by clicking on title.
blocks=document.getElementsByTagName("div");
blocks=$A(blocks);
blocks.each (
function(
block){
  if (
block.className=='block') {
  
title=block.childNodes[1];
  
title.onclick = function () {
   
content=this.parentNode.childNodes[3];
   
content.style.display!='none' ? content.style.display='none' : content.style.display='block';   
  }
}
}
);
</script>
?>

(To add: some cookie stuff to let the browser remember which blocks you've got hiding/showing.)

Prototype-ish approach to the script; it requires Prototype 1.6.

<script language="javascript" type="text/javascript">
// Assuming jQuery.noConflict is already called.
if (Drupal.jsEnabled) {
$(document).observe('dom:loaded', function() {
$$('div.block h2').invoke('observe', 'click', function() {
  $(this).up().down('div.content').invoke('toggle');
});
});
}
</script>

jQuery approach, which is supposed to work with Drupal 5.

<script language="javascript" type="text/javascript">
if (Drupal.jsEnabled) {
(function($) {
$('div.block h2').click(function() {
  $(this).parent().find('div.content').slideToggle();
});
})(jQuery);
}
</script>

More info: See 'Collapsiblock' under jstools module for a full-blown and configurable version of this task. I think it's cookied by now.

Comments

Drupal 6: Collapsiblock

Drupal 6 users can use Javascript Tools Collapsiblock to achieve the same.

separate project

Actually Collapsiblock is a separate project.

Page status

Needs updating

Log in to edit this page

About this page

Drupal version
Drupal 4.7.x, Drupal 5.x
Drupal’s online documentation is © 2000-2012 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.
nobody click here