Tabs

<div class="js-tabs">
    <div class="tabs u-push-btm-half">
        <ul class="tabs_list">
            <li role="presentation" class="tabs_item">
                <a id="tab-1" href="#" class="js-tabs_tab tabs_btn is-active" role="tab" aria-selected="false" aria-controls="panel-1">
            Tab 1
          </a>
            </li>
            <li role="presentation" class="tabs_item">
                <a id="tab-2" href="#" class="js-tabs_tab tabs_btn" role="tab" aria-selected="false" aria-controls="panel-2">
            Tab 2
          </a>
            </li>
            <li role="presentation" class="tabs_item">
                <a id="tab-3" href="#" class="js-tabs_tab tabs_btn" role="tab" aria-selected="false" aria-controls="panel-3">
            Tab 3
          </a>
            </li>
            <li role="presentation" class="tabs_item">
                <a id="tab-4" href="#" class="js-tabs_tab tabs_btn" role="tab" aria-selected="false" aria-controls="panel-4">
            Tab 4
          </a>
            </li>
            <li role="presentation" class="tabs_item">
                <a id="tab-5" href="#" class="js-tabs_tab tabs_btn" role="tab" aria-selected="false" aria-controls="panel-5">
            Tab 5
          </a>
            </li>
        </ul>
    </div>

    <div>
        <div id="panel-1" class="js-tabs_panel tabpanel is-visible" role="tabpanel" aria-labelledby="tab-1" aria-hidden="true">
            Tab content 1
        </div>
        <div id="panel-2" class="js-tabs_panel tabpanel" role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">
            Tab content 2
        </div>
        <div id="panel-3" class="js-tabs_panel tabpanel" role="tabpanel" aria-labelledby="tab-3" aria-hidden="true">
            Tab content 3
        </div>
        <div id="panel-4" class="js-tabs_panel tabpanel" role="tabpanel" aria-labelledby="tab-4" aria-hidden="true">
            Tab content 4
        </div>
        <div id="panel-5" class="js-tabs_panel tabpanel" role="tabpanel" aria-labelledby="tab-5" aria-hidden="true">
            Tab content 5
        </div>
    </div>
</div>
<div class="js-tabs">
  <div class="tabs u-push-btm-half">
    <ul class="tabs_list">
      {{#each items}}
        <li role="presentation" class="tabs_item">
          <a
            id="tab-{{id}}"
            href="#"
            class="js-tabs_tab tabs_btn{{#if isFirst}} is-active{{/if}}"
            role="tab"
            aria-selected="false"
            aria-controls="panel-{{id}}"
          >
            {{../label}} {{id}}
          </a>
        </li>
      {{/each}}
    </ul>
  </div>

  <div>
    {{#each items}}
      <div
        id="panel-{{id}}"
        class="js-tabs_panel tabpanel{{#if isFirst}} is-visible{{/if}}"
        role="tabpanel"
        aria-labelledby="tab-{{id}}"
        aria-hidden="true"
      >
        {{../title}} {{id}}
      </div>
    {{/each}}
  </div>
</div>
{
  "label": "Tab",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "title": "Tab content ",
  "items": [
    {
      "id": 1,
      "isFirst": true
    },
    {
      "id": 2
    },
    {
      "id": 3
    },
    {
      "id": 4
    },
    {
      "id": 5
    }
  ]
}

There are no notes for this item.