If you are a savvy Drupal builder or developer, you may be familiar with Quicktabs module which will easily allows you to create a tabbed content with a few point and click.

Have you ever wish that Quicktabs provide a better animation for displaying / hiding the content? Wish no more... I'll provide a jQuery snippet and some guide to create a full width sliding effect using Quicktabs as the base.

Note: this code is not tested with Quicktabs + AJAX fetching content. it may or may not work.

Before we do anything, we require you to build a quicktabs block, put some content in it and place the block in a block region.

It would be best if the block region has :

1. Full page width, not 960px and centered. it has to be Full Page width

2. The full page width is for the region container and block region it self.

3. The region container must have css property of position: relative; because we will make the content to have absolute position;

STEP 1

Create a new js file or use your theme existing js file such as scripts.js , if you must create a new js file, don't forget to edit the .info file of your theme to add the newly created scripts.

Omega theme user must create a "script" library entry in the subtheme .info files.

jQuery(document).ready(function ($) {
 
  /**
   * Creating new quicktabs animation mimicking parallax slider
   * by adding new click event handler
   * if needed
   * add auto slide with timer
   */
  
  // double check the class and change if needed
  // this is the quicktabs per content wrapper
  var quicktabsPage = $('.quicktabs-tabpage');

  if (quicktabsPage.length != 0) {
    var totalElems = quicktabsPage.length,
        quicktabsMain = $('.quicktabs-wrapper'), // this is the main wrapper for all quick tabs element
        quicktabsSlideWrapper = $('.quicktabs_main'),  // this is the wrapper for all quicktabs per content wrapper a.k.a $('.quicktabs-tabpage') wrapper
        quicktabTabs = quicktabsMain.find('.item-list'), // this is the tabs navigation wrapper
        tabsHeight = quicktabTabs.outerHeight(true);
    
    var setHeight = function (slideIndex) {
      var pageHeight = quicktabsPage.eq(slideIndex).outerHeight(true) + tabsHeight;
      quicktabsMain.stop().animate({height : pageHeight}, '400');
    }
    
    var setWidth = function() {
      var frameWidth = quicktabsMain.outerWidth(true);
      var totalwidth = frameWidth * totalElems;
      quicktabsSlideWrapper.width(totalwidth);
      quicktabsPage.width(frameWidth);     
    }
    
    var slideTo = function (slideIndex) {
      var w_w = quicktabsMain.outerWidth(true);
      var slide_to  = parseInt(-w_w * slideIndex);
      
      quicktabsSlideWrapper.stop().animate({
        left  : slide_to + 'px'
      },800, 'easeOutQuad');
    }
      
    // start the slider by setting the correct width and height
    setHeight(0, quicktabsPage, quicktabsSlideWrapper);
    setWidth(quicktabsMain, totalElems);
    
    // binding the click
    $('ul.quicktabs-tabs li').each(function(){
      var slideIndex = $('ul.quicktabs-tabs li').index($(this));
      // bind a the new override sliding method
      $(this).find('a').click(function(e) {
        /**
         * This is the area where the animation coding should take place
         */
        e.preventDefault(); 
        setHeight(slideIndex);
        setWidth();
        slideTo(slideIndex);     
      });
    });
    
    // resize the width upon windows resizing
    $(window).resize(function(){
      setWidth();
    }); 
  }
});

STEP 2

We do need several css properties set right before the sliding effect can occurs :

/** IMPORTANT CSS FOR SLIDER LAYOUT **/
.quicktabs-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

html.js .quicktabs_main{
  position: absolute;
}

.quicktabs-tabpage {
  float: left;
}

.quicktabs-tabpage article{
  width: 100%;
  margin: 0 auto;
}

ul.quicktabs-tabs {
  width: 100%;
}

.quicktabs-hide {
  display: block !important;
}

Note :

the CSS code above is just the bare minimum css needed for a sliding effect and only been tested with omega theme css.

Other theme will definetelly need additional CSS for this to work right.

Now if you are lucky... you've just treat yourself with a fancy sliding effect for your quicktabs...