7.5 #permalink Tabs box

Toggle example guides Toggle HTML markup

A box with tabs. Make sure the order of the tabsBoxes matches the order of the tabsBox-tabs and the heavy lifting of showing the right content will be handled by the attached javascript.

first tab content
<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 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 class="border_default">
  <div class="tabsBox-content">first tab content</div>
  <div class="tabsBox-content" style="display:none;">second tab content</div>
Source: modules/07_large_elements/tabsBox.less, line 4