jl-Tabs select with javascript

[Sven-M. Wölfle]

Is there a proper method to start the tabs particle with an other entry activated than the first one.

To get an id for each list item I already added in line 215 `{% for item in particle.items %}
<li <strong>id=”{{id}}-{{loop.index}}</strong>” >
{% if item.navigation_thumbnail != ” and particle.tab_styles == ‘thumbnav’ %}
<a href=”#”><img {{imagewidth}} {{imageheight}} src=”{{ url(item.navigation_thumbnail)|e }}” alt=”{% if item.navigation_text != ” %}{{item.navigation_text|raw}}{% else %}{{item.titleitems|raw}}{% endif %}” id=”image01″ class=”tm-image”></a>
{% else %}
<a href=”#”>{% if item.navigation_text != ” %}{{item.navigation_text|raw}}{% else %}{{item.titleitems|raw}}{% endif %}</a>
{% endif %}
</li>
{% endfor %}
{% endset %}`
I thought i could just simulate a click with javascript document.getElementById("jltabs-xxxx-x").click(); but this doesn’t work. Manipulating Background and colours works out fine (so the id is alright).

On the Uikit page I found the following: `Methods
The following methods are available for the component:

Show
UIkit.tab(element).show(index);`

But I haven’t got a clue what they want to tell me with that.

[Sven-M. Wölfle]

Seems like the editor messed up with the code.

line 215:
<li id=”{{id}}-{{loop.index}}” >

[Tony]

Hi Sven,
Open jltabs.html.twig and find line 387, you can special tab index for items using active option. Let say you want to set the active class for 2nd item. The original code looks like:

<ul class="jl-tab{{tab_alignment}}{% if particle.tab_margin == 'default' %} jl-margin{% else %} jl-margin-{{ particle.tab_margin|e }}{% endif %}" jl-tab="connect: #js-{{id}};{{tab_animation}}">

change to

<ul class="jl-tab{{tab_alignment}}{% if particle.tab_margin == 'default' %} jl-margin{% else %} jl-margin-{{ particle.tab_margin|e }}{% endif %}" jl-tab="connect: #js-{{id}}; active: 1;{{tab_animation}}">

Simply pass the option active: 1 to specify the active index on init (for 2nd item).

Thank you

[Sven-M. Wölfle]

Hi Tony

Thats really nice to know, but not what I’m searching for. I need a way to dynamicly change the active state of an entry. When I click on a Button on the main page there’s an offcanvas opening with three tab-particles which active state schould fired by the button pressed before. And if I click an entry in one tab-particle it should fire the entry in the others. In the moment I’m ending up with an „UIkit is not defined” error.