Nunjucks add class to element if first item in loop

Question

I am performing a loop on a set of content stored in a yaml file which outlines my page's table of contents. For the first item in the loop, I want to add an 'is-active' modifier to the class. All other items should not receive this item. The 'is-active' class will result in my accordion being open/expanded rather than closed.

For some reason, the syntax I'm using is not working. Any help you can give me is appreciated.

template.html

<!-- language: lang-html -->
<div class="grid-container leader-1">
  <div class="column-6 tablet-column-12">
    <aside class="js-accordion accordion tablet-hide" aria-role="complementary">
      {% for group in data.table_of_contents[section].navigation %}
      {% if group.hidden != true %}
      {% if loop.first == true %}
      <div class="accordion-section is-active">
      {% else %}
      <div class="accordion-section">
      {% endif %}
        <h4 class="accordion-title">
          <span class="accordion-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/>
            </svg>
          </span>
          {{ group.group }}
        </h4>
        <!-- accordion-menu -->
        <div class="accordion-content">
          {% for page in group.pages %}
          {% if page.title == 'Overview' %}
          <a href="#{{group.group | replace(" ", "-") | lower}}" class="side-nav-link">{{page.title}}</a>
          {% else %}
          <a href="#{{page.link}}" class="side-nav-link">{{page.title}}</a>
          {% endif %}
          {% endfor %}
        </div>
      {% endif %}
      {% endfor %}
      </div>
    </aside>
  </div>
</div>

For some reason, my 'is-active' modifier is being added to all of the 'accordion-section' divs. I only want it added to the first 'accordion-section' div it creates, so that the first accordion-section is expanded and the rest underneath it are closed.

table-of-contents.yml

get-started:
title: 'Get Started'
base: 'get-started'
navigation:
  - group: 'Get Started'
    pages:
      - title: 'Overview'
        link: get-started
      - title: 'Static Files'
        link: static-files
      - title: 'Ruby Gem'
        link: ruby-gem
      - title: 'Whats New'
        link: whats-new
javascript:
title: 'JavaScript'
base: javascript
navigation:
  - group: 'Interactive Patterns'
    pages:
      - title: 'Overview'
        link: overview
      - title: 'Import calcite-web.js'
        link: importing
      - title: 'Event Bus'
        link: event-bus
  - group: 'Utility Functions'
    pages:
      - title: 'Overview'
        link: utility-functions
      - title: 'DOM Utilities'
        link: dom-utilities

The table of contents goes on for quite a while, but this is a representative sample of the structure.

Answer 1

You can't use the double equals for this comparison. Try simply checking the boolean with no comparison:

{% if loop.first %}
  <div class="accordion-section is-active">
{% else %}
  <div class="accordion-section">
{% endif %}