Tabbed Pages

Use the 'Tab Names' content type (on its own) to create a tabbed page.
You can have up to 6 tabs. Each tab's content goes into a sub-section.

How to make a tabbed Page

  1. Add a 'Tab names' content type to the section you wish to contain tabs.  This is where you can define the names of up to 6 tabs.

  2. For each tab you defined in step 1, create a subsection for it:
    1. Name it 'Tab N Content'
      (where N is the number of the tab, starting with 1).
      For example, a page with three tabs would have these subsections: 'Tab 1 Content', 'Tab 2 Content' and 'Tab 3 Content'.

    2. Un-check the 'Show in navigation' checkbox.

  3. In each of your 'Tab N Content' sub-sections, add some content - then save and approve it.
    Note: You can add as many content types as you like into each 'Tab N Content' subsection.

Limitations

Tabs are not without their limits - and there are more of them than we'd like.  Here are the most important things to remember:

Number of Tabs

You can only have 6 tabs on your page.

Tab Names

Tabs can have whatever name you like in the 'Tab Names' content type (which dictates what the end-user sees) but you have to call the sub-sections 'Tab N Content' (where N is a number between 1 and 6) in Site Manager.

Linking to Tabs

You can link to the first tab by using a section link to the tabbed page.  The first tab loads by default.

To link directly to other tabs you must treat it as an external link:

  • When entering the Link URL, append #tab followed by the desired tab number

E.g:

 http://www.nuigalway.ie/about-us/jobs/index.html#tab3 
 or
 http://www.nuigalway.ie/about-us/jobs/#tab2 

Previewing Tabs

To preview it within SiteManager, preview the section  containing the 'Tab Names' content type - not any of the 'Tab N Content' subsections.

If you preview sub-sections SM tries to build the page for you but will get it wrong because it can't see the tab configuration from one section higher in the site structure.

Troubleshooting Tabs

If your tabs are not displaying correctly please do the following:

  • Ensure you are using a tabbed page layout at the top level - Content type Tab Names in your Tabbed Page section.
  • Ensure that the subsections are named exactly as described above and are active.
  • Ensure that each subsection has some approved content in it.

Sometimes you need more than 5 tabs

... and because tabs wrap onto another line if required (so that they're mobile friendly) there was nothing to stop us adding a 6th possible tab to this content type - for the few occasions where it might come in handy!
(new since May 17, 2021)

play icon circular tealTuition Video

Embedded tabs

You can also use this content type to embed a mini tabbed segment into a page that contains other content.
In this case, its a good idea to leave the Title and introduction text blank and to turn on the border. 
View Example.

 

Accordion Items instead of Tabs

You can use an 'Accordion Names' content type in the same way as you use a 'Tab Names' one - to define up to 6 expandable segments. Each segment is named in the 'Accordion Names' content type and the hidden content is defined in sub-sections called 'Tab 1 Content', 'Tab 2 Content', 'Tab 3 Content', etc.
This makes it really easy to switch from a tabbed page to an accordion on (or vice versa) - you only need to replace one content item!

This is what the above tabs would look like if you used an 'Accordion Names' content type instead of a 'Tab Names' one:

How To

How to make a tabbed Page

  1. Add a 'Tab names' content type to the section you wish to contain tabs.  This is where you can define the names of up to 6 tabs.

  2. For each tab you defined in step 1, create a subsection for it:
    1. Name it 'Tab N Content'
      (where N is the number of the tab, starting with 1).
      For example, a page with three tabs would have these subsections: 'Tab 1 Content', 'Tab 2 Content' and 'Tab 3 Content'.

    2. Un-check the 'Show in navigation' checkbox.

  3. In each of your 'Tab N Content' sub-sections, add some content - then save and approve it.
    Note: You can add as many content types as you like into each 'Tab N Content' subsection.

Limitations

Limitations

Tabs are not without their limits - and there are more of them than we'd like.  Here are the most important things to remember:

Number of Tabs

You can only have 6 tabs on your page.

Tab Names

Tabs can have whatever name you like in the 'Tab Names' content type (which dictates what the end-user sees) but you have to call the sub-sections 'Tab N Content' (where N is a number between 1 and 6) in Site Manager.

Linking

Linking to Tabs

You can link to the first tab by using a section link to the tabbed page.  The first tab loads by default.

To link directly to other tabs you must treat it as an external link:

  • When entering the Link URL, append #tab followed by the desired tab number

E.g:

 http://www.nuigalway.ie/about-us/jobs/index.html#tab3 
 or
 http://www.nuigalway.ie/about-us/jobs/#tab2 

Previewing

Previewing Tabs

To preview it within SiteManager, preview the section  containing the 'Tab Names' content type - not any of the 'Tab N Content' subsections.

If you preview sub-sections SM tries to build the page for you but will get it wrong because it can't see the tab configuration from one section higher in the site structure.

Troubleshooting

Troubleshooting Tabs

If your tabs are not displaying correctly please do the following:

  • Ensure you are using a tabbed page layout at the top level - Content type Tab Names in your Tabbed Page section.
  • Ensure that the subsections are named exactly as described above and are active.
  • Ensure that each subsection has some approved content in it.

+1

Sometimes you need more than 5 tabs

... and because tabs wrap onto another line if required (so that they're mobile friendly) there was nothing to stop us adding a 6th possible tab to this content type - for the few occasions where it might come in handy!
(new since May 17, 2021)

Sidebar Content Box

This is an example sidebar content box

It's a good idea to include 2 paragraphs to make sure T4 adds paragraph tags to the markup.  This will turn the text inside the content box white.