using foundation 5 joyride with tabs

Question

Is there a way to switch tabs with foundation 5 Joyride? I have foundation tabs on the page and want Joyride to point elements on different tabs.

Answer 1

Like mentioned in the comment from Steven, you could use the callback either in the pre or post step callback function you activate the tab you need.

post_step_callback     : function (){},    // A method to call after each step
pre_step_callback      : function (){}    // A method to call before each step

Hope this helps...

Answer 2

Here's what worked for me. I looked around and couldn't find anything useful, so wrote this. The hardest part was figuring out how to get the id of the target anchor. This was found buried in the 'this' object available to the callback.

$(this.$target)[0].id;

The 'content' class is used by foundation to identify the content to display when a tab is clicked. So traversing up the .parents tree finding the enclosing elements gives you the content tab(s) holding your link. And then of course you have to add an id to the <a> element of the tab you want to click. If you name it the same as your content div, with '-a' appended, you should be good to go.

html:

<dl class="tabs radius" data-tab id="my_tabs">
    <dd class="active"><a href=\"#tab1\" id=\"tab1-a\">Tab 1</a></dd>
    <dd class="active"><a href=\"#tab2\" id=\"tab2-a\">Tab 2</a></dd>
</dl>
<div class="tabs-content">
    <div class="content" id="tab1">
        <article id="joyride_stop1">...</article>
    </div>
    <div class="content" id="tab2">
        <article id="joyride_stop2">...</article>
    </div>
</div>

js:

$(document).ready(function() {
    $(document).foundation('joyride', 'start', { 
        pre_step_callback: function(i, tip) {
            var target = $(this.$target)[0].id;
            if($('#' + target).parents('.content').length > 0) {
                $('#' + target).parents('.content').each(function() {
                    var id = $(this).attr('id');
                    if($('#' + id).is(':visible') == false) {
                        $('#' + id + '-a').click();
                    }
                });
            }
        }
    });
});

This will work on any page, whether it contains tabs or not, so it can be universally included across a site.