<div class=“row editor-link”>

<div class="col editor-link mb-3">
  <a href="cloudcannon:collections/_tabs/" class="btn btn-success editor-button">Edit Tabs Collection</a>
</div>

</div> <ul class=“nav nav-tabs” id=“{{ page.title | replace: ' ', '-' | downcase }}” role=“tablist”>

{% assign page_title = page.title %}
{% assign tab_collection = site.tabs | where: "tabs_page", page_title | sort: "order" %}
{% for tab in tab_collection %}
{% assign tab_id = tab.name | downcase | remove: '-' | replace: '&', 'and' | replace: ' ', '-' | remove: "'" | replace: "/", "-" | remove: '’' | remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4' | remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' | remove: '?' | remove: '!' | remove: '#' | remove: '$'  | remove: '.' | remove: ',' | remove: '(' | remove: ')' | remove: '®' | remove: '©' %}
<li class="nav-item">
  <a class="nav-link{% if forloop.first == true %} active{% endif %}" id="{{ tab_id }}-label" data-toggle="tab" href="#{{ tab_id }}" role="tab" aria-controls="{{ tab_id }}" aria-selected="{% if forloop.first == true %}true{% else %}false{% endif %}">{{ tab.name }}</a>
</li>
{% endfor %}

</ul> <div class=“tab-content mt-3 px-1” id=“{{ page.title | replace: ' ', '-' | downcase }}-content”>

{% for tab in tab_collection %}
{% assign tab_id = tab.name | downcase | remove: '-' | replace: '&', 'and' | replace: ' ', '-' | remove: "'" | replace: "/", "-" | remove: '’' | remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4' | remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' | remove: '?' | remove: '!' | remove: '#' | remove: '$'  | remove: '.' | remove: ',' | remove: '(' | remove: ')' | remove: '®' | remove: '©' %}
<div class="tab-pane fade links__offset{% if forloop.first == true %} show active{% endif %}" id="{{ tab_id }}" role="tabpanel" aria-labelledby="{{ tab_id }}-label">
  {{ tab.content }}
</div>
{% endfor %}

</div>


<hr>