Tabs Widget

This widget is a custom implementation of tabs functionality and must not be confused with jQueryUI's tab widget.

The actual <div> which contains the tabs, has to have a CSS-Class named tab-headline-wrapper. The tabs will be identified by this CSS-Class. The content of the tabs has to be in a <div> which has to have a CSS-Class called tab-content-wrapper. The elements inside, have to be in the same order as the tabs.

Example

<div data-gx-widget="tabs">
  <!-- Tabs -->
  <div class="tab-headline-wrapper">
    <a href="#tab1">Tab #1</a>
    <a href="#tab2">Tab #2</a>
  </div>

  <!-- Content -->
  <div class="tab-content-wrapper">
    <div>Content of tab #1.</div>
    <div>Content of tab #2.</div>
  </div>
</div>
Source: