drowl_paragraphs_bs-1.x-dev/modules/drowl_paragraphs_bs_type_tabs_accordion/templates/paragraph--drowl-paragraphs-bs--container-tabs-accordion.html.twig

{% extends "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig" %}

{% set tab_acc_attributes = create_attribute() %}

{%
  set classes = [
    'paragraph',
    'paragraph--type-' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}

{% block paragraph %}
    {% if view_mode == 'preview' %}
      {#
        Dont' remove this preview check - otherwise you will run into layout pragraphs issues, see:
        https://www.drupal.org/project/drowl_paragraphs_bs/issues/3228383
        Also don't remove the wrapper div, see:
        https://www.drupal.org/project/drowl_paragraphs_bs/issues/3265862
      #}
      <div{{ attributes.addClass(classes) }}>
        {# Add upublished label #}
        {{ block("unpublished_hint", "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig") }}
        {{ content }}
      </div>
    {% else %}
      <div{{ attributes.addClass(classes).setAttribute('id', 'tabs-accordion-outer-wrapper-' ~ paragraph.id()) }}>
        {# Add upublished label #}
        {{ block("unpublished_hint", "@drowl_paragraphs_bs/paragraph--drowl-paragraphs-bs.html.twig") }}
        {% if tabs_acc_type == 'tabs' %}
          {% set tabs_classes =
            [
              'nav',
              tabs_acc_tabs_style ? tabs_acc_tabs_style|clean_class : 'nav-tabs',
              'mb-3'
            ]
          %}
          {% block tabs %}
            <ul{{ tab_acc_attributes.addClass(tabs_classes) }} id="tab-wrapper-{{ paragraph.id() }}" role="tablist">
                {% for key, item in content.field_paragraphs['#items'] %}
                    {% set tab_icon = drupal_field('field_icon', 'paragraph', item.target_id)|field_value %}
                    {% set tab_label = drupal_field('field_title', 'paragraph', item.target_id) %}
                    {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_anchor_id.value %}
                    {% set tab_id = tab_custom_id ? tab_custom_id : 'tab-pane-' ~ item.target_id %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link{% if loop.first %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#{{ tab_id }}-pane" type="button" role="tab" aria-controls="{{ tab_id }}"{% if loop.first %} aria-selected="true"{% else %} aria-selected="false"{% endif %}>
                          {% if tab_icon %}
                            <div class="nav-link__icon">
                              {{ tab_icon }}
                            </div>
                          {% endif %}
                          {{ tab_label }}
                        </button>
                    </li>
                {% endfor %}
            </ul>
          {% endblock tabs %}
          {% block tabs_content %}
            <div class="tab-content" id="tab-content-wrapper-{{ paragraph.id() }}">
                {% block content %}
                    {% for key, item in content.field_paragraphs['#items'] %}
                        {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_anchor_id.value %}
                        {% set tab_id = tab_custom_id ? tab_custom_id : 'tab-pane-' ~ item.target_id %}
                        <div class="tab-pane fade{% if loop.first %} show active{% endif %}" id="{{ tab_id }}-pane" role="tabpanel" aria-labelledby="{{ tab_id }}" tabindex="0">
                            {{- content.field_paragraphs[key] -}}
                        </div>
                    {% endfor %}
                {% endblock content %}
            </div>
          {% endblock tabs_content %}
        {% else %}
          {% set accordion_classes =
            [
              'accordion',
              tabs_acc_accordion_style ? tabs_acc_accordion_style|clean_class
            ]
          %}
          <div {{ tab_acc_attributes.addClass(accordion_classes) }} id="accordion-wrapper-{{ paragraph.id() }}">
            {% for key, item in content.field_paragraphs['#items'] %}
              {% set tab_icon = drupal_field('field_icon', 'paragraph', item.target_id)|field_value %}
              {% set tab_label = drupal_field('field_title', 'paragraph', item.target_id) %}
              {% set tab_custom_id = drupal_entity('paragraph', item.target_id)['#paragraph'].field_anchor_id.value %}
              {% set tab_id = tab_custom_id ? tab_custom_id : 'accordion-pane-' ~ item.target_id %}
              <div class="accordion-item">
                <div class="accordion-header">
                  <button class="accordion-button{% if not (tabs_acc_init_state == 'first-open' and loop.first) %} collapsed{% endif %}" data-bs-toggle="collapse" data-bs-target="#{{ tab_id }}" type="button" aria-controls="{{ tab_id }}"{% if loop.first %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}>
                    {% if tab_icon %}
                      <div class="accordion-button__icon lh-1 me-1">
                        {{ tab_icon }}
                      </div>
                    {% endif %}
                    {{ tab_label }}
                  </button>
                </div>
                <div id="{{ tab_id }}" class="accordion-collapse collapse{% if tabs_acc_init_state == 'first-open' and loop.first %} show{% endif %}"{% if not tabs_acc_allow_multiple_open %} data-bs-parent="#accordion-wrapper-{{ paragraph.id() }}"{% endif %}>
                  <div class="accordion-body">
                    {{- content.field_paragraphs[key] -}}
                  </div>
                </div>
              </div>
          {% endfor %}
          </div>
        {% endif %}
      </div>
    {% endif %}
{% endblock paragraph %}