title: Nunjucks add class to element if first item in loop
body: <p>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.</p>
  
  <p>For some reason, the syntax I'm using is not working. Any help you can give me is appreciated.</p>
  
  <p>template.html</p>
  
  <pre><code>&lt;!-- language: lang-html --&gt;
  &lt;div class="grid-container leader-1"&gt;
    &lt;div class="column-6 tablet-column-12"&gt;
      &lt;aside class="js-accordion accordion tablet-hide" aria-role="complementary"&gt;
        {% for group in data.table_of_contents[section].navigation %}
        {% if group.hidden != true %}
        {% if loop.first == true %}
        &lt;div class="accordion-section is-active"&gt;
        {% else %}
        &lt;div class="accordion-section"&gt;
        {% endif %}
          &lt;h4 class="accordion-title"&gt;
            &lt;span class="accordion-icon"&gt;
              &lt;svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"&gt;&lt;path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
            {{ group.group }}
          &lt;/h4&gt;
          &lt;!-- accordion-menu --&gt;
          &lt;div class="accordion-content"&gt;
            {% for page in group.pages %}
            {% if page.title == 'Overview' %}
            &lt;a href="#{{group.group | replace(" ", "-") | lower}}" class="side-nav-link"&gt;{{page.title}}&lt;/a&gt;
            {% else %}
            &lt;a href="#{{page.link}}" class="side-nav-link"&gt;{{page.title}}&lt;/a&gt;
            {% endif %}
            {% endfor %}
          &lt;/div&gt;
        {% endif %}
        {% endfor %}
        &lt;/div&gt;
      &lt;/aside&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>table-of-contents.yml</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The table of contents goes on for quite a while, but this is a representative sample of the structure.</p>