You are here

Home » API reference » Text with Title Field 8

text-with-title-tabs-horizontal.html.twig in Text with Title Field 8 

<ul class="nav nav-tabs" role="tablist">
    {% for tab in tabs %}
        <li role="presentation" class="{{ tab.active ? "active" : "" }}" ><a href="#{{ tab.id }}" aria-controls="home" role="tab" data-toggle="tab">{{ tab.title }}</a></li>
    {% endfor %}
</ul>
<div class="tab-content">
    {% for tab in tabs %}
        <div role="tabpanel" class="tab-pane {{ tab.active ? "active" : "" }}" id="{{ tab.id }}">{{ tab.text }}</div>
    {% endfor %}
</div>
1 theme call to text-with-title-tabs-horizontal.html.twig
TextWithTitleTabsHorizontalFormatter::view in src/Plugin/Field/FieldFormatter/TextWithTitleTabsHorizontalFormatter.php
Overide the view method so we can wrap the result in the accordion markup.

File

templates/text-with-title-tabs-horizontal.html.twig
View source 
  1. <ul class="nav nav-tabs" role="tablist">

  2.     {% for tab in tabs %}

  3.         <li role="presentation" class="{{ tab.active ? "active" : "" }}" ><a href="#{{ tab.id }}" aria-controls="home" role="tab" data-toggle="tab">{{ tab.title }}</a></li>

  4.     {% endfor %}

  5. </ul>

  6. <div class="tab-content">

  7.     {% for tab in tabs %}

  8.         <div role="tabpanel" class="tab-pane {{ tab.active ? "active" : "" }}" id="{{ tab.id }}">{{ tab.text }}</div>

  9.     {% endfor %}

  10. </div>