1

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.

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.