Drupal hide/show a sidebar with jQuery

I’ve hid the right sidebar on the HR website today.
I used jQuery so that it degrades gracefully when users don’t have JS enabled.

The sidebar-right region is used for ancillary information; links, the audience for the node content, etc… So it was determined that we could hide it but make the information available if people wanted more.

Here’s the a look at the page before the change:

Screen Shot of the sidebar-right before the change
Notice the right side bar just sitting there not benefiting anyone. Just taking up space.

Here it is collapsed after adding the jQuery function:

Screen Shot of the closed sidebar-right after the change
Oh, so clean.

How do you like the info image?
image of an i in circle
It’s all right. ya? 6 minutes in Fireworks.

Here’s the page with the right sidebar opened up:

Screen Shot of the open sidebar-right after the change

Here’s the code:

Drupal.behaviors.collapseSideBarRight = function (context) {
  /* ********************* Version history *********************
   * 12-6-12 12:30 pm - V.b - cleaned up code with jsLint while dedugging preprocess conflict. Vid
   * 12-6-12 11:50 am - V.a - created. Vid
   ********************* end Versions history ********************* */
  //run only if there is a context var
  if (typeof context !== 'undefined') {
    //page load
    if (typeof context === 'object' && context.toString().indexOf('HTMLDocument') !== -1) {
      if ($('body').hasClass('sidebar-right') || $('body').hasClass('sidebars')) {
        function hideRtSdBr(fadeSpeed) {
          $('#sidebar-right').fadeOut(fadeSpeed, function () {
            $('#moreinfo span').text('');
            $('#moreinfo').attr('title', 'Click to view more information');
          }); //end $('#sidebar-right').fadeOut(fadeSpeed, function ()
        } //end function hideRtSdBr(fadeSpeed)

        //hide the side bar on page load
        //setup info button for sidebar
        $('#main').prepend('<a id="moreinfo" title="Click to view more information" onClick="return false;" href="#" style="position:relative; float:right; width:32px; min-height:32px; top:0; right:0; z-index: 6; text-align:center; text-decoration:none;"><img src="/files/information_sm.png" alt="information icon" /><span style="font-size:.9em; line-height:.7em;"></span></a>');

        //set up moreinfo icon click function
        $('#moreinfo').click(function () {
          if ($('body').hasClass('sidebars')) {
          } else {
            $('#sidebar-right').fadeIn("fast").css({'border': '1px solid #CCCCCC', 'width': '198px'});
            $('#moreinfo span').text('Hide');
            $('#moreinfo').attr('title', 'Click to hide more info.');
          } //end if hasclass sidebars
        }); // end $('#moreinfo').click(function ()
      } // end if ($('body').hasClass('sidebar-right'))
    } // end if typeof .. //page load
  } // end if (typeof context !== 'undefined')
}; // end Drupal.behaviors.collapseSideBarRight

Lots of good stuff bundled in a Drupal.behaviors function.
I dropped it into a js_injector file (cached and preprocessed) and moved on.

You can see it in action on the hr web site.

I could dissect the code if you’re interested but I’ll leave it be for now.

Leave a Comment