title: How can I toggle the active class for tabs created in a for loop?
body: <p>I know how to make a CSS tab component for regular HTML and CSS, but do not know how to do it when in for loop. I know this is Shopify, but problem is really how to make a tab component with for loops. I want the first index in loop to have the active class first (first tab is selected by default) but when I use the <code>forloop.first</code>, its somewhat hardcoded.</p>
  <p>I do not know how to use JavaScript to add/remove a class (to show content based on tab clicked) when in a for loop for tabs component</p>
  <p>HTML (Shopify Liquid)</p>
  <pre><code>&lt;div class=&quot;tab-wrapper&quot;&gt;
    {% for product in collection.products %}
      &lt;div id=&quot;tab-{{ forloop.index }}&quot; class=&quot;{% if forloop.first %}tab-active{% endif %}&quot;&gt;
    {% endfor %}
  &lt;/div&gt;
  &lt;div class=&quot;content-wrapper&quot;&gt;
    {% for product in collection.products %}
      &lt;div id=&quot;content-{{ forloop.index }}&quot; class=&quot;content content-active&quot;&gt;
    {% endfor %}
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.tab-active {
    color: red;
  }
  .content{
    display: none;
  }
  .content-active {
    display: block;
  }
  </code></pre>
  <p>JavaScript: ?</p>