7.5 #permalink Tabs box
A box with tabs. Make sure the order of the tabsBox
es matches the order of the tabsBox-tab
s and the heavy lifting of showing the right content will be handled by the attached javascript.
Example
first tab content
Markup
<script type="text/javascript">deferred.push(function(){loadJS("/v2/js/modules/tabsBox.js");});</script>
<div class="grid-parent">
<div class="grid-6 box_rightPaddedHalf layout_centerVertical grid-parent tabsBox-tab tabsBox-tab_selected layout_rel">
<a href="javascript:void(0);" class="grid-12"><span class="link_linkify"></span>First tab</a>
</div>
<div class="grid-6 box_leftPaddedHalf layout_centerVertical grid-parent tabsBox-tab layout_rel">
<a href="javascript:void(0);" class="grid-12"><span class="link_linkify"></span>Second tab with a long name</a>
</div>
</div>
<div class="border_default">
<div class="tabsBox-content">first tab content</div>
<div class="tabsBox-content" style="display:none;">second tab content</div>
</div>
Source:
modules/07_large_elements/tabsBox.less
, line 4