Answers.Body: <p>The problem is that your category slugs (which double as array keys) are integers (i.e. years). I'm not sure exactly what happens, but Twig doesn't handle integer keys very well and actually seems to "normalize" the keys (i.e. the first numeric key, for example <code>2012</code>, will become <code>0</code>, the second numeric key will be <code>1</code>, etc – this happens to the numeric keys even if you have both numeric and non-numeric keys in your array).</p>
  
  <p>In any case, the workaround is to prefix the slugs with an arbitrary character (or string) when you use them as array keys, and then remove that arbitrary character when you print the key later (i.e. your <code>catSlug</code> variable). Something like this:</p>
  
  <pre><code>{% set entriesByCat = entriesByCat|merge({ ('%'~cat.slug): entries }) %}
  
  ...
  
  &lt;div id="{{ catSlug|trim('%') }}" class="tab-block"&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-04T20:34:01.560Z
Answers.Text: That totally did the trick, man this page is beautiful now [and functional]. Thanks for the explanation. And I did need to add that 'trim' to the tab itself of as well
Answers.UserDisplayName: Den Bell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-04T20:34:51.420Z
Answers.Text: That's great @DenBell – happy it helped you out.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-04T20:06:40.390Z
Answers.LastActivityDate: 2016-08-04T20:11:42.353Z
Answers.LastEditDate: 2016-08-04T20:11:42.353Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Body: <p>I want to make a tabbed content section of book citations where the tabs are years, made from categories.  I am using a model I found in the cookbook here, which seems to be exactly what I am trying to do.  <a href="http://craftcookbook.net/recipes/330" rel="nofollow">http://craftcookbook.net/recipes/330</a></p>
  
  <p>So far, I have the resulting citations listing in the proper order, but the tab ID that is exported in the resulting html does not give the slug [which is a year], but rather a consecutive number, always 0,1,2,3,etc. … Like id=“0”, instead of id=“2016”     SO the panel container does not display the correctly when the tab is clicked, instead it displays all entries , instead of only those from 2016, for example.</p>
  
  <p>I'm close, but not quite there, and stumped as to why the html ends up with a number instead of the year/category. Here is the code I have, largely taken from the cookbook:</p>
  
  <pre><code>&lt;div class="light-wrapper"&gt;
  &lt;div class="container inner"&gt;
  {% set entriesByCat = {} %}
  {% set entries = craft.entries.section('newsArchive') %}
  {% set cats = craft.categories.group('newsArchive') %}
  
  {% for cat in cats %}
  {% set entries = entries.relatedTo(cat) %}
      {% if entries|length %}
          {% set entriesByCat = entriesByCat|merge({ (cat.slug): entries }) %}
      {% endif %}
  {% endfor %}
  
  {% if cats|length %}
  &lt;div class="tabs tabs-side tab-container"&gt;
      &lt;ul class="etabs"&gt;
      {% for cat in cats %}
          &lt;li class="tab"&gt;&lt;a href="#{{ cat.slug }}"&gt;{{ cat.title }}&lt;/a&gt;&lt;/li&gt;
      {% endfor %}
      &lt;/ul&gt;
  
      {% for catSlug, catEntries in entriesByCat %}
      &lt;div class="panel-container"&gt;
          &lt;div id="{{ catSlug }}" class="tab-block" &gt;
  
              {% for entry in catEntries %}
              &lt;ul class="circled" &gt;
                  {% for block in entry.bibliography %}       
                      {% if block.type == "biblioBook" %}
                  &lt;li&gt;{{ entry.authorLast }}, {{ entry.authorFirst }}. &lt;strong&gt;{{ entry.title }}&lt;/strong&gt;. {{ block.publisherCity }}: {{ block.publisherName }}, {{ block.publicationDate.format('Y') }}. Print.&lt;/li&gt;
                      {% endif %} 
                  {% endfor %}
              &lt;/ul&gt;
              {% endfor %}
          &lt;/div&gt;
          &lt;!-- /.tab-block --&gt; 
      &lt;/div&gt;
      &lt;!-- /.panel-container --&gt; 
  {% endfor %}
       &lt;/div&gt;
       &lt;!-- /.tabs --&gt; 
      {% endif %}
  &lt;/div&gt;
  &lt;!-- /.container --&gt; 
  </code></pre>
  
  <p>
  </p>
  
  <p>And the resulting HTML:</p>
  
  <pre><code>&lt;div class="light-wrapper"&gt;
  &lt;div class="container inner"&gt;
      &lt;div class="tabs tabs-side tab-container"&gt;
          &lt;ul class="etabs"&gt;
              &lt;li class="tab"&gt;&lt;a href="#2016"&gt;2016&lt;/a&gt;&lt;/li&gt;
              &lt;li class="tab"&gt;&lt;a href="#2015"&gt;2015&lt;/a&gt;&lt;/li&gt;
              &lt;li class="tab"&gt;&lt;a href="#2013"&gt;2013&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="panel-container"&gt;
              &lt;div id="0" class="tab-block" &gt;
                  &lt;ul class="circled" &gt;
                      &lt;li&gt; Author, A. &lt;strong&gt;”TITLE.”&lt;/strong&gt; &lt;em&gt;Random House&lt;/em&gt; 04 April 2016: . Print.&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="circled" &gt;
                      &lt;li&gt; Author, B. &lt;strong&gt;”TITLE.”&lt;/strong&gt; &lt;em&gt; Random House &lt;/em&gt; 04 June 2016: . Print.&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel-container"&gt;
              &lt;div id="1" class="tab-block" &gt;
                  &lt;ul class="circled" &gt;
                      &lt;li&gt; Author, C. &lt;strong&gt;”TITLE.”&lt;/strong&gt; &lt;em&gt; Random House &lt;/em&gt; 04 May 2015: . Print.&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel-container"&gt;
              &lt;div id=“2” class="tab-block" &gt;
                  &lt;ul class="circled" &gt;
                      &lt;li&gt; Author, D. &lt;strong&gt;”TITLE.”&lt;/strong&gt; &lt;em&gt; Random House &lt;/em&gt; 04 Oct 2013: . Print.&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.panel-container --&gt; 
      &lt;/div&gt;
      &lt;!-- /.tabs --&gt; 
  &lt;/div&gt;
  &lt;!-- /.container --&gt; 
  </code></pre>
  
  <p>
  </p>
  
Tags: <categories>
Title: Tabbed Content & Categories - Tab ID html displays a category number instead of the slug
ThreadText: # Tabbed Content & Categories - Tab ID html displays a category number instead of the slug
  
  (Asked by: username_0 on 2016-08-04)
  
  I want to make a tabbed content section of book citations where the tabs are years, made from categories. I am using a model I found in the cookbook here, which seems to be exactly what I am trying to do. <http://craftcookbook.net/recipes/330>
  
  So far, I have the resulting citations listing in the proper order, but the tab ID that is exported in the resulting html does not give the slug [which is a year], but rather a consecutive number, always 0,1,2,3,etc. … Like id=“0”, instead of id=“2016” SO the panel container does not display the correctly when the tab is clicked, instead it displays all entries , instead of only those from 2016, for example.
  
  I'm close, but not quite there, and stumped as to why the html ends up with a number instead of the year/category. Here is the code I have, largely taken from the cookbook:
  
  ```
  <div class="light-wrapper">
  <div class="container inner">
  {% set entriesByCat = {} %}
  {% set entries = craft.entries.section('newsArchive') %}
  {% set cats = craft.categories.group('newsArchive') %}
  
  {% for cat in cats %}
  {% set entries = entries.relatedTo(cat) %}
      {% if entries|length %}
          {% set entriesByCat = entriesByCat|merge({ (cat.slug): entries }) %}
      {% endif %}
  {% endfor %}
  
  {% if cats|length %}
  <div class="tabs tabs-side tab-container">
      <ul class="etabs">
      {% for cat in cats %}
          <li class="tab"><a href="#{{ cat.slug }}">{{ cat.title }}</a></li>
      {% endfor %}
      </ul>
  
      {% for catSlug, catEntries in entriesByCat %}
      <div class="panel-container">
          <div id="{{ catSlug }}" class="tab-block" >
  
              {% for entry in catEntries %}
              <ul class="circled" >
                  {% for block in entry.bibliography %}       
                      {% if block.type == "biblioBook" %}
                  <li>{{ entry.authorLast }}, {{ entry.authorFirst }}. <strong>{{ entry.title }}</strong>. {{ block.publisherCity }}: {{ block.publisherName }}, {{ block.publicationDate.format('Y') }}. Print.</li>
                      {% endif %} 
                  {% endfor %}
              </ul>
              {% endfor %}
          </div>
          <!-- /.tab-block --> 
      </div>
      <!-- /.panel-container --> 
  {% endfor %}
       </div>
       <!-- /.tabs --> 
      {% endif %}
  </div>
  <!-- /.container --> 
  
  ```
  
  And the resulting HTML:
  
  ```
  <div class="light-wrapper">
  <div class="container inner">
      <div class="tabs tabs-side tab-container">
          <ul class="etabs">
              <li class="tab"><a href="#2016">2016</a></li>
              <li class="tab"><a href="#2015">2015</a></li>
              <li class="tab"><a href="#2013">2013</a></li>
          </ul>
          <div class="panel-container">
              <div id="0" class="tab-block" >
                  <ul class="circled" >
                      <li> Author, A. <strong>”TITLE.”</strong> <em>Random House</em> 04 April 2016: . Print.</li>
                  </ul>
                  <ul class="circled" >
                      <li> Author, B. <strong>”TITLE.”</strong> <em> Random House </em> 04 June 2016: . Print.</li>
                  </ul>
              </div>
          </div>
          <div class="panel-container">
              <div id="1" class="tab-block" >
                  <ul class="circled" >
                      <li> Author, C. <strong>”TITLE.”</strong> <em> Random House </em> 04 May 2015: . Print.</li>
                  </ul>
              </div>
          </div>
          <div class="panel-container">
              <div id=“2” class="tab-block" >
                  <ul class="circled" >
                      <li> Author, D. <strong>”TITLE.”</strong> <em> Random House </em> 04 Oct 2013: . Print.</li>
                  </ul>
              </div>
          </div>
          <!-- /.panel-container --> 
      </div>
      <!-- /.tabs --> 
  </div>
  <!-- /.container --> 
  
  ```
  
  **Tags:** categories
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-08-04. Score: 1 | Accepted answer
  
  The problem is that your category slugs (which double as array keys) are integers (i.e. years). I'm not sure exactly what happens, but Twig doesn't handle integer keys very well and actually seems to "normalize" the keys (i.e. the first numeric key, for example `2012`, will become `0`, the second numeric key will be `1`, etc – this happens to the numeric keys even if you have both numeric and non-numeric keys in your array).
  
  In any case, the workaround is to prefix the slugs with an arbitrary character (or string) when you use them as array keys, and then remove that arbitrary character when you print the key later (i.e. your `catSlug` variable). Something like this:
  
  ```
  {% set entriesByCat = entriesByCat|merge({ ('%'~cat.slug): entries }) %}
  
  ...
  
  <div id="{{ catSlug|trim('%') }}" class="tab-block">
  
  ```
  
  > **Comments:**
  > **username_0**: That totally did the trick, man this page is beautiful now [and functional]. Thanks for the explanation. And I did need to add that 'trim' to the tab itself of as well  
  > **username_1**: That's great @username_0 – happy it helped you out.  
  
  ---
  
  