In this video, we'll create a new Quicktab that displays specific nodes using the accordion renderer.

• Go to "Structure => Quicktabs => Add Quicktabs Instance" (admin/structure/quicktabs/add)
  • Title: Notable Nodes
  • Renderer: Choose "accordion" (This will create click-able headers that expand and collapse the tabs.)
  • [ ] History (This option adds the tab state to the URL. This allows the user to use the browser back and forward buttons, as well as bookmark pages with a specific tab selected.)
  • JQuery UI Options
    • [ ] Autoheight (If checked, this will set the height of the expanded Quicktab to match the largest tab. Others will have white space at the bottom to fill the space. If unchecked, each tab will expand vertically to accommodate its content.)
    • [x] Collapsible (By default, accordions always keep one section open. This option will allow all sections to be collapsible. Clicking on the currently open section will collapse its content pane.)
  • Default Tab: -None-

Next, let's add tabs

• Tab Title: Node 1
  • Tab Type: [x] node
  • Node: 1
  • View mode: Full content
  • [ ] Hide the title of this node
• Tab Title: Node 2
  • Tab Type: [x] node
  • Node: 2
  • View mode: Full content
  • [ ] Hide the title of this node
• Click "Add tab" icon to create additional tab
• Tab Title: Node 3
  • Tab Type: [x] node
  • Node: 3
  • View mode: Teaser
  • [ ] Hide the title of this node
• (Save)

Let's go to the blocks administration page to enable this Quicktab.

Manage block

• "Structure => blocks" (admin/structure/blocks)
• Scroll down to Disabled blocks
  • Block: Notable Nodes
  • Region: Choose "Content"
• Scroll up ton Contents block and move it above the "Most Recent" block
• (Save blocks)

Now, when we save the block and go to the homepage, we'll see the Quicktab. We can click each tab to expand it and view its content. Clicking the header again collapses the tab.

You'll also notice that Node 3 is using the "Teaser" view mode because we selected that when creating the Quicktabs instance.

In the next video, we'll create a new Quicktab block that displays Views using the "ui_tabs" renderer.