Home Forums Particles Support jl-Tabs select with javascript

Viewing 4 posts - 1 through 4 (of 4 total)
  • Sven-M. Wölfle
    Sven-M. Wölfle
    Subscriber

    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
    Sven-M. Wölfle
    Subscriber

    Seems like the editor messed up with the code.

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

    Tony
    Tony
    Moderator

    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
    Sven-M. Wölfle
    Subscriber

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.