I am trying to have a vertical tab with hidden content 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.
&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;

The problem with this method is that instead of showing one tab-content per href, it is showing all.
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 %}
   &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 %}

Which leaves the first tab active.