In this video, I will show you how to create a new Quicktab block that displays an existing block in each tab.

  • Go to "Structure => Quicktabs => Add Quicktabs Instance" (admin/structure/quicktabs/add)
    • Title: Most Recent (Give your Quicktab a name that will appear as the block title)
    • Render: For this example, we'll use the default which is "Quicktabs" (We'll talk about accordion on Video 3 and ui_tabs on Video 4)
    • Ajax (This gives you the option to use AJAX when loading the content of the tabs)
      • [ ] Yes: Load only the first tab on page view (This means that only the content of the active tab will be loaded on page view and the content of the other tabs will be loaded via AJAX when those tabs are clicked. This will cause the page to initially load faster - especially when the tabs contain large amounts of content, or views - but when you do click the other tabs, they will take a little longer to load, since they'll have to retrieve the data at that time.)
      • [x] No: Load all tabs on page view (This will load the content of all of the tabs on page view. This will cause a slower initial page load - especially when the tabs contain large amounts of content, or views - but the other tabs will display faster, when clicked, since they are all already loaded. Let's not use Ajax mode for this example)
    • Default tab: None (This is optional. If nothing is selected, no tab will be visible by default. If you do choose one, the selected tab will be visible on page load. I'll demonstrate this after we view the block.)
    • [ ] Hide empty tabs (If enabled, this will hide tabs that are empty or have no content. This will also hide restricted tabs. Note that this option does not work in AJAX mode.)

Let's go ahead and add a couple of tabs:

  • Tab Title: Content
    • Tab Type: [x] block
    • Select a block: Choose "Recent content (node:recent)"
  • Tab Title: Comments
    • Tab Type: [x] block
    • Select a block: Choose "Recent comments (comments:recent)"
  • (Save)

Manage block

Each new Quicktab instance will be readily available on the blocks administration page to be configured and enabled. Let's display the "Most Recent" block.

  • Click the "blocks administration page" link or you can go to "Structure => blocks" (admin/structure/blocks)
  • Scroll down to Disabled blocks
    • Block: Most Recent
    • Region: Choose "Content"
    • Scroll up and move the block above the "Main page content" block
    • (Save blocks)

Now, if we go to the homepage, we'll see the "Most Recent" Quicktab with two tabs, the Content tab and comments tab.

You probably noticed that when the page loaded, neither tab was selected. That's because we didn't select a default tab. Let's do that now.

Adding default tab

  • Go to "Structure => Quicktabs =>" (admin/structure/quicktabs)
  • Click "Edit" next to "Most Recent"
  • Default tab: Choose "Comments"
  • (Save)

Now, when we go back to homepage, we'll see that the "Comments" tab is loaded by default.

In the next video, we'll look at what the "Accordion" renderer looks like, and display specific nodes in quicktabs.