Minimizing and maximizing blocks using JavaScript

In this recipe, we will be looking at using JavaScript to add a clickable button to each block allowing them to be minimized or maximized upon clicking.

Getting ready

We will be using the myzen theme created earlier in this book as the example theme in this recipe. We will also be using a couple of icon images to indicate the minimized and maximized state of each block. These images are to be placed inside the images folder of the theme and named open.png and close.png, respectively.

How to do it...

The following steps are to be performed inside the myzen theme folder at sites/all/themes/myzen.

1. Browse into the js subfolder where JavaScript files are conventionally stored.

2. Create a file named block.js and open it in an editor.

3. Add the following JavaScript to the file:

   Drupal.behaviors.myzenBlockDisplay = function (context) {
   // We are targeting all blocks inside sidebars.
   var s = $('div.sidebar').addClass('js-sidebar');
   $('.block h2.title', s)
   .click...