Drupal 7 Quicktabs Module

By shane
Wed, 2012-10-17 00:33
5 comments
Daily Dose of Drupal Episode #30

In this episode we look at the Drupal 7 Quicktabs module and examine how it can be used to easily create tabbed content containing blocks, views, nodes, and even other quicktabs blocks.

In this episode you will learn:

  • How to use the Drupal 7 Quicktabs module for creating tabbed content on a Drupal website
  • How to position a Drupal 7 Quicktabs block using the Drupal blocks system
  • How to change the style of a Drupal 7 Quicktabs block instance

Welcome to another Daily Dose of Drupal, today we’re on Episode Number 30 and today we’re going to be talking about the Quick Tabs Module. Quick Tabs Module is a great solution if you need to take some different blocks and creates various tab contents.

So this could be a View with block of Node or even other Quick Tabs and you can use it to create tab content which is going to easily page through on a Drupal site. So we’re just going to show a quick example of this and there’s a couple of different designs you can choose from and you can of course build your own different Quick Tabs Designs but we’ll go ahead and we’ll start from the beginning and we’ll start by downloading the Quick Tabs Module.

So now that we have the Quick Tabs Module downloaded we will come here to the modules page and you can see it does require KS Tools so make sure you have that downloaded and installed and we’re going to turn on both Quick Tabs and the Quick Tab Styles Module, so if you haven’t click on save on that and if we scroll down and find the Quick Tabs Module again in this list you can see that there is various configuration pages so I’ll go ahead and I will go to Quick Tabs Page … there’s a Quick Tabs and a Quick Tab Style. So it shows you the various different styles that you can choose from; Arrows, Basic Bullets, Excel, Garland, Mac, Nav list and all the way through, we’ll go ahead and we’ll leave it at Arrows and you can also go into now List Quick Tabs which is available just going to Structure, clicking Quick Tabs and you get to the Quick Tabs page.

So we’re going to go ahead and add Quick Tabs in an instance here and we’ll say the rendered; we want it to be Quick Tabs, you can have it be accord in or UI Tabs, here you can select the style and as we saw in the Styles Tab it shows you the various options, we’ll go with Arrows and now you have an option of whether you want to use Ajax to load the tabs or no, if you select Yes then it will only load the default tab when you go to the page, then when you click on the Quick Tabs tab it will go ahead and do an Ajax call to load that content dynamically, this will of course make it faster on the initial load but each click will cost a little bit slower because it has to go ahead and use Ajax Call and pull down that content, it will also means that you’re initial call requires a little bit less information to be pass back to the browser.

Selecting No will go ahead and load everything on the initial page view and just hide those other tabs. So really it’s up to you, there’s different … depending on what’s displaying in the tabs and your website may want to change that blog, go ahead and say no, let’s load all the tabs on the Page View, you can also select this check box which will hide any tabs if they’re empty.

So if you have a specific view that a person doesn’t have permission to, you could go ahead and select this and that tab won’t even show up as an option because it will render as an empty tab, we can go through here and you can select all these different blocks that are available on your website.

So we can go ahead and let’s just call this one Search and we’ll grab this Search Form … I’m just finding some examples here and this is a tab type of a block, if we wanted to use a View we could select View here or we could select other Quick Tabs which there are aren’t any other Quick Tabs right now. We’ll go ahead and we’ll look at a specific Node on the site; if we go here you can see that there’s a test article in here and if you hover over the Edit Tab, you can look down here at the bottom you can see that it’s Node 20 but we’ll go ahead and we’ll select Node and we’ll put in 20 as the Node ID.

You can hide the title and you can make it a teaser view but we’ll just put Test Article and we can go ahead and we can add another one and we can do Review or we’ll just go ahead and do another block just as an example because we don’t have any views on this that would work very well.

So you can go ahead and you can select the Navigation Menu for instance and we’ll just put Navigation, so we’ll go ahead and click Save. Pretty basic so far, you’re just building a list of, you know, in this case we have two blocks and one Node that we want to display in a Quick Tabs instance, now if we go to the Blocks page and let’s say we want to find this Quick Tab in here and I call it Test Quick Tabs, we can put this and we’ll go with the Content section and it’s just like any other block that at this point, you can put it in any region in your theme, we of course could limit this to only show up on specific pages or if you’re using something like panels, you could display it in a panel, in this case we’re just going to use the standard block system, go back to the homepage, you’ll notice now we have Quick Tabs showing up.

So this is how Quick Tabs will render; it’s using the Arrow Style and as you can see it brings in this Test Article Navigation, brings in the Navigation Menu which is the same as over here and you can see it’s very easy to easily create Tab Content. I can easily come easily come back to this Quick Tab, click Edit and change the style to let’s say Mac, click Save, come back to the homepage and now you can see the tabs have changed and it still works just as it is before.

Super easy to create various different types of Tab Content for display inside in just a regular block or inside a panel, very useful when you want to display data and you can go on across it horizontally, it’s something that I’ve used in dozens of different websites for various purposes and I’m sure you’ll find a use for it as well.

So thanks for watching the Daily Dose of Drupal and learning a little bit about the Drupal 7 Quick Tabs Module, as always I’m Shane and you can follow me on Twitter @smthomas3 or you could go to codekarate.com and sign up for the newsletter, thanks again for watching and we’ll be back again tomorrow with another Drupal Topic.

5 Secrets to Becoming a Drupal 7 Ninja

Comments

Shane,

This series of Drupal videos is excellent - thanks for all the guidance. But in this episode you mention inserting Quicktabs in a panel. In practice it appears not that easy, whilst it does come up as a 'Miscellaneous' item in adding content to a panel (Panels 3 Drupa 7) - it gives an AJAX HTTP error.

Have you done this in practice?

Thanks,

Mark

I wonder if you loaded the entire Quicktabs on page load instead of loading the quicktabs through ajax if that would fix the issue. Obviously it is not the ideal solution as loading through Ajax is sometimes preferred, but it might work.

I believe I have done this before in the past.

Thanks.

Thanks, but this didn't resolve the issue. Digging a bit deeper, it seems that QuickTabs used to work in Panels, but appears to have an issue at the moment that has been logged.

However, I may have a solution using the default tabs functionality of panels, and the Tab Tamer module to customise the output in the manner I would like.

Thanks again for all the videos!

Please I want to display quicktab through views, but it is asking me to create a field. I don't understand.

Hi.

I tried using quick tabs to generate horizontal tabs for the terms my ubercart store but i could not. Do you know a way around using quicktabs as a views style to generate quicktabs?

Kindly refer t this error i posted on drupal.org

https://drupal.org/node/2154883

Post new comment