Tabs & Accordions

 

Tabs and accordions are a great way to provide larger amounts of text and other related information in an easily digestible format. Available in both themes via the Quicktabs module, as well as inline in the WYSIWYG text editor, exclusively in the Editorial theme.

 

 

 

 

Exclusive to the Editorial theme, WYSIWYG tabs can be added inline with the rest of the Body text.

Since they are created inline within the page's Body text, they are unique to that page, and cannot be easily shared with other pages. Instead, they must be recreated on the other page(s).

Create WYSIWYG Tabs

  1. Click the New Draft tab on the desired page
  2. In the Body text editor, click on the Tab icon in the WYSIWYG editor menu
     

The WYSIWYG editor menu with the tabs icon circled in red

 

 

A window will open with three limited WYSIWYG text editors with corresponding title fields. Each title field/WYSIWYG combo represents a tab.

  • Delete a tab by clicking the red X
  • Move a tab to the left with the up arrow
  • Move a tab to the right with the down arrow

The title field and mini WYSIWYG editor for inline tabs
 

  1. Click the Add New Item button near the bottom right of the window to add additional tabs
  2. Click the OK button near the bottom right of the window to finish editing your tab

 

Exclusive to the Editorial theme, WYSIWYG accordions can be added inline with the rest of the Body text.

Since they are created inline within the page's Body text, they are unique to that page, and cannot be easily shared with other pages. Instead, they must be recreated on the other page(s).

Create WYSIWYG Accordions

  1. Click the New Draft tab on the desired page
  2. In the Body text editor, click on the Accordion icon in the WYSIWYG editor menu
     

The WYSIWYG editor menu with the tabs icon circled in red

 

A window will open with three limited WYSIWYG text editors with corresponding title fields. Each title field/WYSIWYG combo represents an Accordion.

  • Delete an accordion by clicking the red X
  • Move an accordion up or down with the arrows

The title field and mini WYSIWYG editor for inline tabs
 

  1. Click the Add New Item button near the bottom right of the window to add additional tabs
  2. Click the OK button near the bottom right of the window to finish editing your tab

 

Available in both the Editorial and the Classic theme of GW Drupal, the Quicktab module allows content managers to create tabs, accordions and dropdowns.

Since they are created in the module - outside of any given page - they are independent elements that can be added to any page as desired.

Note: the Quicktab module is only accessible to those users with Site Administrator permissions in GW Drupal. However, a Content Supervisor or Contributor can create the base content element (ex: a page or Promotion) referenced within the tabs of the module.

Horizontal quicktab module tabs with federal grant info for new undergrads, continuing undergrads and grad students

 

Quicktab tabs

Quicktab module accordions labeled security, access and conduct & compliance with the final tab expanded

 

Quicktab accordions

Quicktab module dropdown with the freshman student tab active to display a quick links list

 

Quicktab dropdown

Create a Quicktab

  1. Go to Structure > Quicktabs > Add quicktabs instance
  2. Title: internal administrative field for your organizational needs
  3. Renderer:
    • Accordion - a vertical list of expandable/collapsible tabs that display their content when clicked
    • Dropdown - a dropdown list displays the tab titles and the content of a tab displays when selected
    • Quicktabs - a horizontal row of tabs and the content of a tab displays below when selected
  4. Tab title: front end title displayed on the tab
  5. Tab Type:
    • Node: use to reference the Node ID of a piece of content in your website
    • qtabs: use to nest another, pre-existing Quicktab inside of this one's tab
    • Callback: use to reference an RSS or Twitter feed
  6. Click on the Add Tab button if you need to add additional tabs to the Quicktab
  7. Click the Save button

Add a Quicktab to a Page

These steps can be completed by a user with Content Supervisor or Site Administrator permissions in GW Drupal

On the page you want the QT to display:

  1. Click the Customize this Page button
  2. Click on Miscellaneous options
  3. Click on the desired Quicktab
  4. Check the Override Title checkbox to hide or customize the title that displays on the page
  5. Click the Finish button on the window
  6. Drag the Quicktab to the desired region of the page, if necessary
  7. Click the Save button at the bottom of the screen

You may need to refresh the page to see the new page layout.

Edit or Delete an Existing Quicktab

These steps can only be performed by a user with Site Administrator permission in GW Drupal.

  1. Go to Structure > Quicktabs
  2. Click the Edit link next to the applicable QT
  3. Make your edits or delete the desired tab, as necessary
  4. Click the Save button