Page tabs

These tabs can be used for additional navigation, but must appear within content area of pages, not above the menu or underneath the banner.

Page tabs must be within a grid class to ensure the margins align correctly.

The heading which applies to the whole page/all tabs should appear above the tab bar. Any headings which apply to the content within the tab should appear underneath the tab bar. Use of a heading is important for accessibility, but if this causes repetition you can hide the heading from display by using the scrnhide class.

In the example below, the page heading is Publications and the 2009 tab is currently open.

Publications

2009 releases

  • A theory of information architecture, John Smyth
  • Practical applications of chaos theory, Paul Nerk

Tabs should be styled as an unordered list within a div:

 <div class="pagetabs-nav">
  <ul>
    <li><a href="link1">2010</a></li>
    <li><a href="link2" class="pagetabs-select">2009</a></li>
    <li><a href="link3">2008</a></li>
    <li><a href="link4">2007</a></li>
  </ul>
</div>
 

The class pagetabs-select should be added to the tab that is currently open so that it is formatted differently to the others.

PHP code

If you are using the PHP templates or a system that understands PHP, you can insert the following code where your page tabs should appear to include the tabs and the content within them all within the same page:

<?php
 $tb=1;
 if(isset($_GET['tb'])||isset($_POST['tb'])){$tb=(isset($_POST['tb']))?$_POST['tb']:$_GET['tb'];}
?>
<div class="doublewide">
  <div class="pagetabs-nav">
    <ul>
      <li><a href="?tb=1#tb1" id="tb1" title="Tab 1" <?php if($tb=="1"){echo 'class="pagetabs-select"';} ?> >Tab 1</a></li>
      <li><a href="?tb=2#tb2" id="tb2" title="Tab 2" <?php if($tb=="2"){echo 'class="pagetabs-select"';} ?> >Tab 2</a></li>
      <li><a href="?tb=3#tb3" id="tb3" title="Tab 3" <?php if($tb=="3"){echo 'class="pagetabs-select"';} ?> >Tab 3</a></li>
      <li><a href="?tb=4#tb4" id="tb4" title="Tab 4" <?php if($tb=="4"){echo 'class="pagetabs-select"';} ?> >Tab 4</a></li>
    </ul>
  </div>
  <?php
   switch ($tb) {
   case "1": ?>
    <h2>Heading for tab 1</h2>
    <p>Content for tab 1</p>
    <?php break;
   case "2": ?>
    <h2>Heading for tab 2</h2>
    <p>Content for tab 2</p>
    <?php break;
   case "3": ?>
    <h2>Heading for tab 3</h2>
    <p>Content for tab 3</p>
    <?php break;
   case "4": ?>
    <h2>Heading for tab 4</h2>
    <p>Content for tab 4</p>
    <?php break;
   }
 ?>
  <div class="divline-solid"></div>
</div>
 

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle