Tabs on a v3 template page
Set the bath.macros property to tabs
- Right-click on the page in the cms and select Properties and then click on Advanced.
- Scroll down to the bath.macros property field and add the word tabs.
- Click ok
If you want Google Analytics to track clicks on each tab individually then also add tabtracking to bath.macros property after 'tabs', separated with a comma: tabs,tabtracking
There is currently an issue on IE where the page jumps when switching to a tab with less content. This is caused when the the current tab is added as a hash in the url. This has been disabled to remove this issue.
Tabs on Foundation 4 pages
The HTML to implement tabs in Foundation 4 is different. Instead of a wrapping
<div> with a
<ul> to make the tabs themselves and then separate
<div>s to wrap the content, there's no need for the
<ul> and we use
<section> elements which will contain the "tab" headings and a
<div> for the content.
Use the snippet below as an example:
TAB LABELis the text that will appear on the tab.
HEADINGis a heading that will appear inside of the exposed tabbed area and should be similar the
it might be advisable to keep some tab tiltles shorter than headings - the "Government, charity and public policy" one for example.
CONTENTis just the rest of the content to go within the tabbed area.
Note that these tabs will automatically switch to an accordion below the breakpoint for better viewing on mobiles.
This is implemented on http://test.bath.ac.uk/sandbox/about/our-alumni/index.html.
This implementation of tabs is part of a feature provided by Foundation 4. For more info see the Auto Configuration section of http://foundation.zurb.com/docs/v/4.3.2/components/section.html.