Content Tab Navigation
Source: http://webtrendset.com/demo/easy-responsive-tabs/
Example
- Tab One
- Tab Two
- Tab Three
- Tab Four
Tab One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.
Tab Two
This tab has icon in consectetur adipiscing eliconse consectetur adipiscing elit. Vestibulum nibh urna, ctetur adipiscing elit. Vestibulum nibh urna, t.consectetur adipiscing elit. Vestibulum nibh urna, Vestibulum nibh urna,it.
Tab Three
Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.
Implementation
<!--Horizontal Tab-->
<div id="horizontalTab">
<ul class="resp-tabs-list">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="resp-tabs-container">
<!-- Tab One -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<!-- Tab Two -->
<div>
<p>Vestibulum nibh urna, t.consectetur adipiscing elit. Vestibulum nibh urna, Vestibulum nibh urna,it.</p>
</div>
<!-- Tab Three -->
<div>
<p>Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. </p>
</div>
</div> <!-- /resp-tabs-container -->
</div> <!-- /horizontalTab -->
Scripts and CSS
Metadata Schema
Original dark coloured style with gradients - horizontal only
<!--Responsive Tabbed CSS --> <link href="%globals_asset_url:706694%" rel="stylesheet" type="text/css" />
Dark coloured style - vertical and horizontal
<!--Responsive Tabbed CSS --> <link href="%globals_asset_url:877978%" rel="stylesheet" type="text/css" />
Light coloured style - vertical and horizontal
<!--Responsive Tabbed CSS --> <link href="%globals_asset_url:872478%" rel="stylesheet" type="text/css" />
In the Footer Scripts area of the Metadata Schema
<!-- Responsive Tabbed script --> <script type="text/javascript" src="%globals_asset_url:706734%"></script>
Page Script
At bottom of page.
Alternatively for a more global approach you can nest in:
[878438] - Horizontal
[878198] - Vertical
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
Direct linking to a TAB
The code required to link directly to a TAB is:
https://cms.csu.edu.au/rwd-templates/dynamic-content/content-tab-navigation#{TAB ID} {TAB NUM}
https://cms.csu.edu.au/rwd-templates/dynamic-content/content-tab-navigation#horizontalTab2 // For Guidelines https://cms.csu.edu.au/rwd-templates/dynamic-content/content-tab-navigation#horizontalTab3 // For FAQ
Tabbed Navigation using separate pages
Not a true tabbed navigation - this setup will mimic the workings of a tabbed navigation highlighting the relevant tab and presenting the tab relevant content. Use all the same configuration as above with the exception of the <li></li> tags:
<!--Horizontal Tab--> <div id="horizontalTab"> <ul class="resp-tabs-list"> <li><a href="./?a=XXX">Albury-Wodonga</a></li> <li><a href="./?a=XXX#horizontalTab2">Bathurst</a></li> <li><a href="./?a=XXX#horizontalTab3">Canada</a></li> <li><a href="./?a=XXX#horizontalTab4">Theology</a></li> <li><a href="./?a=XXX#horizontalTab5">Dubbo</a></li> <li><a href="./?a=XXX#horizontalTab6">Orange</a></li> <li><a href="./?a=XXX#horizontalTab7">Policing</a></li> <li><a href="./?a=XXX#horizontalTab8">Wagga Wagga</a></li> </ul> <div class="resp-tabs-container">