The Quick Tabs module allows you to create blocks of tabbed content, specifically views, blocks, nodes *and other quicktabs*. You can create a block on your site containing multiple tabs with corresponding content. Clicking on the tabs makes the corresponding content display instantly, using jQuery. With the 6.x-2.x branch, this can be done in either AJAX or non-AJAX mode.

Video Tutorial

There's a video series covering the Quicktabs module on ModulesUnraveled.com. Check out the intro video below:

Quick Start

Once installed, activate the module through the admin/build/modules page, and grant permissions appropriately for "administer quicktabs" in admin/user/permissions.

To configure the default style of your Quick Tabs, visit admin/settings/quicktabs, where you will see a variety of tab styles available for use. The default style can be overridden for each QT block individually as well when creating/editing your QT block.

To create a new QT block, visit admin/build/quicktabs/add . There you can enter a block title, select a tab style, select whether to load in AJAX or non-AJAX mode, and select the Blocks, Nodes, Quick Tabs, and/or Views you wish to turn into tabs in your QT block.

admin/structure/quicktabs/add in Drupal 7.

AJAX vs. non-AJAX mode

If you choose AJAX mode for your Quick Tabs block (and this is chosen on an individual QT basis), only the content of the active tab will be loaded on page load and the content of the other tabs will be loaded via AJAX on tab click (this is good for performance if you are loading, for example, several large views); in non-AJAX mode the tab content is just hidden / shown on tab-click. This latter method is an ideal way to do something like the Most Popular / Most Emailed stories tabs you see on many news websites, where it is used more as a space-saving device in your sidebar.

If however, you want a QT block as the main content of your entire page, then the chances are that AJAX mode will be more appropriate.

Arguments

This is only useful for views that expect an argument. There are two possible types of arguments, static and dynamic.

The static argument is by typing the argument value itself in the field. This value will be passed to the view as argument.

A dynamic argument is a bit more tricky, because you have to know where in the page URL the argument value is. For instance when you want to pass a node id where the page url is /node/232 then you need to put %1, because %0 represents "node". When the view is expecting a taxonomy term id as argument where the URL is something like /taxonomy/term/1244 then to pass the value 1244, which is the tid, you should put %2 the argument field of your QT definition, because %0 represents the value "taxonomy" and %1 will be "term".

Once created, the Quick Tabs blocks show up in your block listing, ready to be configured and enabled like other blocks. Multiple Quick Tabs blocks can be placed on a single page.

The 6.x-2.x branch also includes the following new features:

  • QTs can be created programmatically
  • you can have a different style for individual QT blocks rather than one style for all
  • you can clone quicktabs

For theming of the tabs, several styles have been provided for you to choose from, along with the default option of no style, if you prefer to add your own theming instead.

This module is in active development.

* 6.x-2.x branch only

AttachmentSize
QuickTabsIntro.jpg47.71 KB