<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.