Set class when link and content is active in a tab menu

Hey!
I am trying to set classes when a tab is active with

{% set current_project = (project.active or project.activeChild) ? 'show active' : '' %}

but it does not really work. As I read in the documentation it checks the URL, and since the ID shows, I suspect that this code does not read the ID.

{% extends 'partials/base.html.twig' %}

{% set focus_projects = page.collection('focus_projects') %}

{% block content %}
<div class="row mt-3 px-1">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Focus projects</h4>
      </div>
      <div class="list-group list-group-flush" id="list-tab" role="tablist">
        {% for project in focus_projects %}
        {% set current_project = (project.active or project.activeChild) ? 'show active' : '' %}
        <a href="#{{ project.menu }}" class="list-group-item list-group-item-action flex-column align-items-start {{ current_project }}">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">{{ project.title }}</h5>
            <small>{{ 'MONTHS_OF_THE_YEAR'|ta(project.date|date('n') - 1) }} {{ project.date|date('d') }}</small>
          </div>
          <p class="mb-1">{{ project.content }}</p>
          <small>Category: </small>
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      {% for project in focus_projects %}
      {% set current_project = (project.active) ? 'show active' : '' %}
      <div class="tab-pane fade {{ current_project }}" id="{{ project.menu }}" role="tabpanel" aria-labelledby="list-{{ project.menu }}-list">{{ project.content }}</div>
      {% endfor %}
    </div>
  </div>
</div>

{% endblock %}

I decided to just start over to check if I did something wrong. I used another markup approach, and this works!

{% extends 'partials/base.html.twig' %}

{% set focus_projects = page.collection('focus_projects') %}

{% block content %}
<div class="row">
  <div class="col-lg-4">
    <!-- List group -->
    <div class="list-group" id="myList" role="tablist">
      {% for project in focus_projects %}
      {% set project_active = (project.active or project.activeChild) ? 'active' : '' %}
      <a class="list-group-item list-group-item-action {{ project_active }}" data-toggle="list" href="#{{ project.menu }}" role="tab">{{ project.title }}</a>
      {% endfor %}
    </div>
  </div>
  <div class="col-lg-8">
    <!-- Tab panes -->
    <div class="tab-content">
      {% for project in focus_projects %}
      {% set project_active = (project.active or project.activeChild) ? 'active' : '' %}
      <div class="tab-pane {{ project_active }}" id="{{ project.menu }}" role="tabpanel">{{ project.content }}</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

But now I have the problem that the first tab is not active unless you click any tab.

I am trying to think about a solution with the IF statement but can not figure it out.

I am trying this:

{% set project_active = (project.isFirst) ? 'active' : '' %}

Thanks!

I fixed it with jQuery, but wish to know how to do this with Grav and twig.

$( "#focusProjects a" ).first().addClass( "active" );
$( ".tab-content .tab-pane" ).first().addClass( "active" );
1 Like