<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>

CC BY-SA 3.0
2016-08-04T20:34:01.560Z
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
Den Bell
CC BY-SA 3.0
2016-08-04T20:34:51.420Z
That's great @DenBell – happy it helped you out.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-08-04T20:06:40.390Z
2016-08-04T20:11:42.353Z
2016-08-04T20:11:42.353Z
Mats Mikkel Rummelhoff
<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>

<categories>
Tabbed Content & Categories - Tab ID html displays a category number instead of the slug
# 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:


{% 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 %}

    
    {% for cat in cats %}
        {{ cat.title }}
    {% endfor %}
    

    {% for catSlug, catEntries in entriesByCat %}
    
        

            {% for entry in catEntries %}
            
                {% for block in entry.bibliography %}       
                    {% if block.type == "biblioBook" %}
                {{ entry.authorLast }}, {{ entry.authorFirst }}. {{ entry.title }}. {{ block.publisherCity }}: {{ block.publisherName }}, {{ block.publicationDate.format('Y') }}. Print.
                    {% endif %} 
                {% endfor %}
            
            {% endfor %}
        
         
    
     
{% endfor %}
     
      
    {% endif %}

 



And the resulting HTML:


    
        
            2016
            2015
            2013
        
        
            
                
                     Author, A. ”TITLE.” Random House 04 April 2016: . Print.
                
                
                     Author, B. ”TITLE.”  Random House  04 June 2016: . Print.
                
            
        
        
            
                
                     Author, C. ”TITLE.”  Random House  04 May 2015: . Print.
                
            
        
        
            
                
                     Author, D. ”TITLE.”  Random House  04 Oct 2013: . Print.

**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 }) %}

...

> **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 @DenBell – happy it helped you out.  

---

