Quicktabbing with Quicktabs

June 10, 2010
blog author

sbell

Creative Director

Quicktabs has quickly become one of my favorite Drupal modules of all time. To think that I was actually wasting time creating tabs by using jQuery plugins, and writing custom AJAX. Creating tabbed content is one of the most popular techniques used on the web today, and with Quicktabs it has never been easier to add tabs to your Drupal site - even with AJAX!

First you'll want to install Quicktabs

Once you have Quicktabs installed, there are a couple of ways to generate tabs. You can do it through the Drupal interface, or you can do it programmatically, but first, make sure you have some content that you want to show in tabs! Quicktabs works with your existing content. You can tab between views, blocks, nodes, or a mixture of these.

For this demo, we'll use Views and set up 2 displays filtered by a certain taxonomy term. We will then create a tab that displays nodes of each taxonomy term respectively. Make sure you have some taxonomy terms to choose from for each post. Then you'll want to create a view called "my_listing", or whatever makes sense for you.

Once you have created your View, create a couple of different "page" displays. Name each display according to your taxonomy term, so if you want to tab between say "Development" and "Theming" nodes, each page display will be named respectively.

Since you're creating page views, you'll have to specify a URL for each under the Page Settings section. You can use something like "list/development" and "list/theming" respectively. This is required by page displays, but it is also good if a user for some reason does not have javascript enabled, they will still be able to see the listings, just not through AJAX.

Also, for simplicity, make "Row style" node, so we don't have to play with fields.

Under "Filters" filter on each display for that specific taxonomy term, so that each display is only displaying nodes of whichever taxonomy you choose. Save the view.

Now that you have some content to play with it's time to create some tabs. Browse to admin/build/quicktabs and click on the "New QT block tab".

By default, Quicktabs creates a block for you which you can then place anywhere in the site like a regular block, but there is also a way to output your quicktabs in code, which i'll show you further down.

In the Block Title field, give your block a meaningful title. Next is the style dropdown, where you can select between various styles of tabs. You can also select "no style" so you can theme them your own way

The next field allows you to select whether or not you want your tabs to be AJAX. In most cases you will want to use AJAX so that you only load the second view when the user requests it.

The "Hide empty tabs" will only work if you do NOT use AJAX, which is kind of unfortunate. But, an easy way to deal with this is to use the "empty text" area in your views to give the user a friendly "There is no content here" message.

The next section is where you will start creating your tabs

Let's say the view you created with the 2 page displays are for a taxonomy term "Development" and one for "Theming". Give each tab their respective title. For the Tab type, select "view". In the tab content section, select the view you created (my_listing). Then select the display you want to show. For the Development tab, show the display that filters on Development. For the Theming tab, show the display that filters on Theming. You can also pass arguments into your Quicktabs to use with Views that accept arguments which is really cool, but I won't be covering that here.

Click save. You now have a block available for you to place anywhere on your site, that will tab between nodes of each taxonomy term! Very cool! But, what if you dont' want to use a block...what if you want a bit more control to place these tabs wherever you want? It's easy.

On your tabs listing page (admin/build/quicktabs) hover over the 'edit' link and take note of your quicktabs ID in the url. (quicktabs/1/edit). If this is your first quicktab, the ID will be 1.

Now to print out your quicktabs, all you need to do is call this function and run it through theme("quicktabs"); like this:

$tabs = quicktabs_load(1); // where 1 is your quicktabs id
$mytabs = theme("quicktabs", $tabs);

return theme("my_custom_template", $mytabs);

Then in your custom template, just print out the mytabs variable and you should see your quicktabs!