4

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.

screenshot

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/

  • Sorry for the delay getting back to you on this. I tried the above method, but clicking on the H2 of the block did not provide any action. Here is a jfiddle I created using your example above. I cannot get it to work there, either. Maybe I am doing something wrong? jsfiddle.net/6jBAZ/1 – hockey2112 Jan 10 '13 at 23:37
  • You also shouldn't be using $(document).ready(). Drupal.behaviors is the preferred option as (apart form anything else) it allows the JS to be re-attached on DOM changes (AJAX loaded content for example). – Chapabu Feb 18 '13 at 9:19
  • Is there any theme in particular that is suited to this technique? I am interesting in something that can will shrink the content area when expanding, and widen it again when it contracts. – vfclists Oct 31 '13 at 9:37
  • @vfclists : I know I am a little late to the party : It all depends on what you want and what you have tried already? What theme did you try to adapt? I think you only need a CSS id/class and a CSS3 transition with a click handler for this. JQuery is already included in Drupal. So this should be quite easy. If you want proper support you should read old questions or post a new question and code example. – Dany Nov 25 '13 at 20:55
0

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'
    })
});
  • Thanks, Dany! Can you provide a little more info re: how exactly I can apply this method? I'm a bit new to this kind of change to the Drupal code, so please consider me to be fairly dense. ;) – hockey2112 Dec 13 '12 at 0:24
  • 1
    Please explain how to get it work in Drupal ? – niksmac Dec 13 '12 at 3:56
  • I have added the full explanation as an answer. Hope it helps. – Dany Dec 16 '12 at 17:54
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.