<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link" id="page_one-tab" data-toggle="tab" role="tab" aria-controls="page_one" aria-selected="true" href="#page_one">Page One</a></li>
<li class="nav-item"><a class="nav-link active" id="page_two-tab" data-toggle="tab" role="tab" aria-controls="page_two" aria-selected="true" href="#page_two">Page Two</a></li>
<li class="nav-item"><a class="nav-link" id="page_three-tab" data-toggle="tab" role="tab" aria-controls="page_three" aria-selected="true" href="#page_three">Page Three</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="page_one" role="tabpanel" aria-labelledby="page_one-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat.</div>
<div class="tab-pane fade show active" id="page_two" role="tabpanel" aria-labelledby="page_two-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat.</div>
<div class="tab-pane fade" id="page_three" role="tabpanel" aria-labelledby="page_three-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat.</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
{% for tab in tabs %}
{% set active_tab = tab.active ? ' active' : '' %}
<li class="nav-item"><a class="nav-link{{ active_tab }}" id="{{ tab.id }}-tab" data-toggle="tab" role="tab" aria-controls="{{ tab.id }}" aria-selected="true" href="#{{ tab.id }}">{{ tab.link_text }}</a></li>
{% endfor %}
</ul>
<div class="tab-content" id="myTabContent">
{% for tab in tabs %}
{% set active_tab_content = tab.active ? ' show active' : '' %}
<div class="tab-pane fade{{ active_tab_content }}" id="{{ tab.id }}" role="tabpanel" aria-labelledby="{{ tab.id }}-tab">{{ tab.content }}</div>
{% endfor %}
</div>
{
"tabs": [
{
"id": "page_one",
"link_text": "Page One",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat."
},
{
"id": "page_two",
"link_text": "Page Two",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat.",
"active": true
},
{
"id": "page_three",
"link_text": "Page Three",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus nec est vitae mattis. Maecenas est nibh, malesuada quis orci in, pulvinar imperdiet odio. Vivamus ac sem at purus ultricies laoreet eget et velit. Etiam tincidunt consectetur nisl nec venenatis. Proin ultrices sed augue a aliquam. Duis turpis orci, euismod eu libero non, congue semper est. Aliquam id ultrices ante, eu hendrerit urna. Nullam egestas purus id malesuada sodales. Curabitur id ipsum placerat, varius velit lacinia, ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur id dictum ex. Aliquam erat volutpat."
}
]
}
.nav-tabs {
.nav-link {
&.active {
.color-scheme-dark & {
background-color: $dark_mode_grey;
color: $white;
}
}
}
}
No notes defined.