In the drupal 6 version it was possible to add cool effects between tabs with just a few lines of code in the quicktabs.js :

// Hide all tabpages.
  tab.container.children().slideUp(1000).addClass('quicktabs-hide');

  // Show the active tabpage.
  if (tab.tabpage.fadeIn(1300).hasClass('quicktabs_tabpage')) {
    tab.tabpage.fadeIn(1300).removeClass('quicktabs-hide');
  } 

also see : http://drupal.org/node/327436
Is something similar possible in the 7-version ? I had no luck so far..

Comments

gratefulsk’s picture

I managed to add a nice fade effect by simply changing the quicktabs.js file on line 43 from

// Hide all tabpages.
tab.container.children().addClass('quicktabs-hide');

to

// Hide all tabpages.
tab.container.children().fadeIn(500).addClass('quicktabs-hide');

This will unfortunately add a style="display:block" to every tab. So to override this in the quicktabs.css change

.quicktabs-hide {
  display: none;
}

to 

.quicktabs-hide {
  display: none !important;
}
tinarey’s picture

Also very interested in this.
This guy seems to be doing it without messing in the Quicktabs code: http://www.victheme.com/blog/drupal-quicktabs-sliding-custom-jquery

Would it be possible/make sense to write additional renderers for Quicktabs?

wooody’s picture

Thanks for share the fade way , can anyone share Auto Tabs code.

Thanks

varshith’s picture

A simple fade transition without editing quicktabs code can be done using CSS3

.quicktabs-hide {
display: block;
opacity: 0 !important;
position: absolute;
top: -999999px;
}

.quicktabs-tabpage {
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition:all 1s ease 0s;
transition:all 1s ease 0s;
}

robgreeniowa’s picture

Issue summary: View changes

#4 worked perfectly without any special config needed. Yay!

smustgrave’s picture

Status: Active » Closed (outdated)

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue.

If still an issue or needed for 4.0.x (latest branch) feel free to reopen