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 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.
- Enable the Quicktabs and Quicktabs Styles modules
- Create a Quicktab block and add the tabs
- Assign content to the tab
- Add content and edit menu links
Enabling the Quicktabs Modules
- From the Admin menu click Modules.
- Scroll down to the Other section.
- Click to enable Quicktabs and Quicktabs Styles.
- Click Save configuration
Adding a Quicktabs Instance (Block)
- From the Admin menu click Structure then Quicktabs.
- Click Add Quicktabs instance.
- Enter a title for your quicktab block.
- Choose how to render your tabs - this example uses quicktabs.
- Choose a style for your quicktab - click the Styles tab at the top right to view the style choices.
- Select default tab to be shown first - none are listed because they haven't been created yet.
- Choose how the content should be loaded - all at once or default tab content first.
- Choose how to handle tabs with no content.
Adding the Tabs
- Enter the name of each tab - one per line. You can add additional tabs, delete tabs or rearrange the tab order.
- 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.
The Teaser format shows some text and includes a Read more link.
- 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.
|
Completing the Process
- 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.
- The About tab can now be chosen as the default tab on the Sidebar Second Edit Quicktabs screen.
- An Events node is created and its number is entered on the Sidebar Second Edit Quicktabs screen.
- The About and News links are removed from the Main menu.