Access Keys:
Skip to content (Access Key - 0)

Creating Tabbed Content

Return to Drupal Cloud Landing Page

On this page:

About Quicktabs

As an alternative to menus you can created a set of tabs to selectively display content. Here’s an example of a block with content tabs placed in the Sidebar second region. As a tab is clicked it reveals content.

quicktabs example

Quicktabs is a module which creates a block for the tabbed content. The block is then placed in a region on your page. The tab style may be changed to one of 11 different styles.

To create the example shown above, several steps were taken.

  1. Enable the Quicktabs and Quicktabs Styles modules
  2. Create a Quicktab block and add the tabs
  3. Assign content to the tab
  4. Add content and edit menu links

Enabling the Quicktabs Modules

  1. From the Admin menu click Modules.
  2. Scroll down to the Other section.
  3. Click to enable Quicktabs and Quicktabs Styles.

    enable quicktabs

  4. Click Save configuration

Adding a Quicktabs Instance (Block)

  1. From the Admin menu click Structure then Quicktabs.

    create quicktab instance 1

  2. Click Add Quicktabs instance.

    create quicktab instance 2

  3. Enter a title for your quicktab block.
  4. Choose how to render your tabs - this example uses quicktabs.
  5. Choose a style for your quicktab - click the Styles tab at the top right to view the style choices.
  6. Select default tab to be shown first - none are listed because they haven't been created yet.

    add quicktab info

  7. Choose how the content should be loaded - all at once or default tab content first.
  8. Choose how to handle tabs with no content.

    add quicktab info

Adding the Tabs

  1. Enter the name of each tab - one per line. You can add additional tabs, delete tabs or rearrange the tab order.

    add quicktab info

  2. Choose the type of tab, or source of the content which may be a block, view or node (content) which is built in or created by you. Other choices will appear depending on the type of tab you choose. This screenshot shows the info for the example Quicktab.

    add quicktab block type

    The Teaser format shows some text and includes a Read more link.

    teaser format

  3. Click Save.

Finding the Node Number

To display a page or content node you must use the number assigned to it when it was created. To find the node number of a page or other content, from the Admin menu click Content. Then, hover over the edit link for the content and look in the lower left corner of your screen.

The node number is directly to the right of /node.

find node number

Completing the Process

  1. The Quicktab block must be placed into a region. For this example, the Blocks screen is used to remove the Blog and News blocks. The Quicktab block named Sidebar Second is moved into that region.
  2. The About tab can now be chosen as the default tab on the Sidebar Second Edit Quicktabs screen.

    set default tab

    set default tab

  3. An Events node is created and its number is entered on the Sidebar Second Edit Quicktabs screen.

    set node number

  4. The About and News links are removed from the Main menu.

Return to Drupal Cloud Landing Page

IS&T Contributions

Documentation and information provided by IS&T staff members

Last Modified:

April 19, 2016

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
c-drupal-cloud c-drupal-cloud Delete
tab tab Delete
tabbed tabbed Delete
content content Delete
quicktab quicktab Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
This product/service is:
Easy to use
Difficult to use

This article is:
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki