<p>You might be better using entry.slug instead of entry.title as there could be spaces in the title.<br />
Or add a filter to the title - e.g. entry.title|kebab  which would remove any spaces.</p>
<p>Also this line:</p>
<pre><code>{% if siteMainUrl.text  == href %} active {% else %} hide {% endif %}
</code></pre>
<p>Where is href coming from? Is it to have a different active tab to the initial one?</p>
<p>Typically I use:</p>
<pre><code>{% for item in tabdata %}
   &lt;div class=&quot;tab-pane fade {{ loop.index == 1 ? 'show active' }}&quot; id=&quot;{{ item.title|kebab }}&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;v-pills-{{ item.title|kebab }}-tab&quot;&gt;

  &lt;/div&gt;
{% endfor %}
</code></pre>
<p>Which leaves the first tab active.</p>

CC BY-SA 4.0
2020-06-22T15:32:42.367Z
2020-06-23T05:26:54.170Z
2020-06-23T05:26:54.170Z
mmc501
<p>In Craft 3, I am trying to build a vertical tab categories using href=#sample and the hidden content id=sample. I am using bootstrap JS as my library. Here is the code I use. I somehow not managed to hide my content, as the method I am using is if and else. Does anyone have any idea? I'm using <code>entry.title</code> for both the href and id. Ignore the <code>onclick</code>, I was trying out something with it.</p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
                                    
    &lt;div class=&quot;col-lg-4&quot;&gt;
                              
        &lt;div class=&quot;list-group&quot; id=&quot;list-tab&quot; role=&quot;tablist&quot;&gt;
            {% for entry in entries %}
                &lt;a class=&quot;list-group-item list-group-item-action {% if entry.id == page.id %} active {% else %} !active {% endif %}&quot; id = &quot;{{entry.title}}-list&quot; role=&quot;tab&quot; aria-controls=&quot;home&quot; href=&quot;#{{entry.title}}&quot; onclick =&quot;&quot;&gt;{{entry.title}}&lt;/a&gt;
            {% endfor %}
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-lg-8&quot;&gt;
                            
        &lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
            {% for entry in entries %}
                {% set thumb = entry.singleImage.first() %}

                &lt;div class=&quot;tab-pane {% if siteMainUrl.text  == href %} active {% else %} hide {% endif %}&quot; id=&quot;{{entry.title}}&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;{{entry.title}}-list&quot; onclick=&quot;&quot;&gt;                                         
                    &lt;h2 style=&quot;color:#fcc61e;&quot;&gt;{{entry.text}}&lt;/h2&gt;
                    &lt;img src=&quot;{{ thumb.getUrl('categories')|default(fallbackImage.getUrl('fallbackImage')) }}&quot; width=&quot;{{ thumb.getWidth('categories') }}&quot; height=&quot;{{ thumb.getHeight('categories') }}&quot; alt=&quot;{{ entry.title }}&quot; title=&quot;{{ entry.title }}&quot;&gt;
                    &lt;a class = &quot;btn-lg btn-default btn&quot; href= &quot;{% if entry.linkurl is empty %}javascript: void(0);{% else %}{{ entry.linkurl }}{% endif %}&quot;&gt;Click Here&lt;/a&gt;                  
                &lt;/div&gt;
            {% endfor %}                                        
        &lt;/div&gt;
                                                                
    &lt;/div&gt;
                                    
&lt;/div&gt;
</code></pre>
<p>The problem with this method is that instead of showing one tab-content per href, it is showing all.</p>

<craft3>
I am trying to have a vertical tab with hidden content
# I am trying to have a vertical tab with hidden content

(Asked by: username_0 on 2020-06-18)

In Craft 3, I am trying to build a vertical tab categories using href=#sample and the hidden content id=sample. I am using bootstrap JS as my library. Here is the code I use. I somehow not managed to hide my content, as the method I am using is if and else. Does anyone have any idea? I'm using entry.title for both the href and id. Ignore the onclick, I was trying out something with it.

                                    
    
                              
        
            {% for entry in entries %}
                {{entry.title}}
            {% endfor %}
        
    
    
                            
        
            {% for entry in entries %}
                {% set thumb = entry.singleImage.first() %}

                                                         
                    {{entry.text}}
                    
                    Click Here                  
                
            {% endfor %}                                        
        
                                                                
    
                                    


The problem with this method is that instead of showing one tab-content per href, it is showing all.

**Tags:** craft3


---

## 1 answers

### Answer by username_1 on 2020-06-22. Score: 1

You might be better using entry.slug instead of entry.title as there could be spaces in the title.
Or add a filter to the title - e.g. entry.title|kebab  which would remove any spaces.
Also this line:
{% if siteMainUrl.text  == href %} active {% else %} hide {% endif %}

Where is href coming from? Is it to have a different active tab to the initial one?
Typically I use:
{% for item in tabdata %}
   

  
{% endfor %}

Which leaves the first tab active.


---

