Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-22T15:32:42.367Z
Answers.LastActivityDate: 2020-06-23T05:26:54.170Z
Answers.LastEditDate: 2020-06-23T05:26:54.170Z
Answers.UserDisplayName: mmc501
Body: <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>
  
Tags: <craft3>
Title: I am trying to have a vertical tab with hidden content
ThreadText: # 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.
  
  ```
  <div class="row">
                                      
      <div class="col-lg-4">
                                
          <div class="list-group" id="list-tab" role="tablist">
              {% for entry in entries %}
                  <a class="list-group-item list-group-item-action {% if entry.id == page.id %} active {% else %} !active {% endif %}" id = "{{entry.title}}-list" role="tab" aria-controls="home" href="#{{entry.title}}" onclick ="">{{entry.title}}</a>
              {% endfor %}
          </div>
      </div>
      <div class="col-lg-8">
                              
          <div class="tab-content" id="nav-tabContent">
              {% for entry in entries %}
                  {% set thumb = entry.singleImage.first() %}
  
                  <div class="tab-pane {% if siteMainUrl.text  == href %} active {% else %} hide {% endif %}" id="{{entry.title}}" role="tabpanel" aria-labelledby="{{entry.title}}-list" onclick="">                                         
                      <h2 style="color:#fcc61e;">{{entry.text}}</h2>
                      <img src="{{ thumb.getUrl('categories')|default(fallbackImage.getUrl('fallbackImage')) }}" width="{{ thumb.getWidth('categories') }}" height="{{ thumb.getHeight('categories') }}" alt="{{ entry.title }}" title="{{ entry.title }}">
                      <a class = "btn-lg btn-default btn" href= "{% if entry.linkurl is empty %}javascript: void(0);{% else %}{{ entry.linkurl }}{% endif %}">Click Here</a>                  
                  </div>
              {% endfor %}                                        
          </div>
                                                                  
      </div>
                                      
  </div>
  
  ```
  
  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 %}
     <div class="tab-pane fade {{ loop.index == 1 ? 'show active' }}" id="{{ item.title|kebab }}" role="tabpanel" aria-labelledby="v-pills-{{ item.title|kebab }}-tab">
  
    </div>
  {% endfor %}
  
  ```
  
  Which leaves the first tab active.
  
  
  ---
  
  