Hide and Reveal Sidebar Blocks in Drupal 7?

Question

I am working on a 1920px-wide site that will be displayed on HDTVs internally at an office. I'd like to place text and other info into (ideally) sidebar blocks, but I'd like for those blocks to be hidden when the page loads. Then, when someone clicks a block's title, that block alone would expand, displaying its content over the primary content area. I have attached an image to illustrate what I mean.

Does anyone here know of a module that can accommodate this type of functionality? If not, any recommendations on how to achieve this would be most appreciated. The sidebar content does not necessarily have to be in blocks.

Answer 1

In the themes .info file you can add a line like this

"scripts[] = myscript.js". This is eplained in the drupal theming guide -> http://drupal.org/node/171205.

Drupal will then load your js file and automatically insert jquery too.

This is the code that you need to put in the js file. Be aware that every region has a div with the class name. Example "region-footer". So thats how you can target them easilly. Make sure you set a width in you css file for the element.otherwise jquery cannot toggle the width.

(function($) {
    $(document).ready(function() {
        $('.region-footer .block h2').click(function() {
            $(this).parent().children('.block-inner').animate({
                width: 'toggle'
            },5000, 'swing');
        });
    });
})(jQuery);

You could also animate/toggle the margin instead of the width. If you do that remember to declare the negative margin for the element in your css file.

Do not forget to clear the cache after altering your themes .info file.

Tip : You could add a nice animation with http://gsgd.co.uk/sandbox/jquery/easing/

Answer 2

I have made a little demo for you.

http://jsfiddle.net/UV2hk/

just include this in a Jquery wrapper through the themes .info file.

Here it is.

jQuery('#label').click(function(){
    jQuery('#content').animate({
        width: 'toggle'
    })
});

Answer 3

Here's a sandbox module that might help:

https://drupal.org/sandbox/mathieso/2264649

It lets users toggle (show/hide) a sidebar region, with all of its blocks.

Kieran