jquery-steps <a href> triggering tabs

Question

I'm using http://www.jquery-steps.com/Examples#basic for an online quiz tool and was wondering if it's possible to have a link or button trigger the click on tab event as seen on the demo I pasted.

HTML:

<section id="basic">
    <h2 class="page-header">Basic Example</h2>
    <div id="wizard-1">
        <h3>Keyboard</h3>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>

        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>

        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>
</section>

JS:

$("#wizard-1").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

If you hover the titles/tabs, you'll see an anchor attached to them. What I would like to do is call the anchor (ie below) and have the tab function as if I had clicked the tab itself.

<a href="#wizard-1-h-2">Step 3 or Pager</a>

JSFiddle: http://jsfiddle.net/fXF6k/1/

Thanks!

Answer 1

Based on the documentation, it seems to lack that functionality as of right now:

/*  
 * Sets a specific step object by index.  
 *  
 * @method setStep  
 * @param index {Integer} An integer that belongs to the position of a step  
 * @param step {Object} The step object to change  
 *
 */
$.fn.steps.setStep = function (index, step) 
{
    throw new Error("Not yet implemented!"); 
};

---

Since it does not yet allow you to go to a specific step, here's how you can call the methods that do exist from an anchor:

See working jsFiddle demo

---

HTML

<a id="previous-step" href="#">Previous</a>
<a id="next-step" href="#">Next</a>

I replaced your anchor tag with the above.

---

JQUERY

var $wizard = $("#wizard-1");

$wizard.steps
({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

$("a[id$=step]").on("click", function (e)
{
    e.preventDefault();
    $wizard.steps( $(this).attr("id").split("-")[0] );
});

---

JQUERY EXPLANATION

a[id$=step]

Selects all anchor tags with an id that ends with step.

$(this).attr("id").split("-")[0]

Pulls the id from clicked anchor tag, splits the string on the - and returns the first part, previous or next, which ends up being the string needed to pass into the steps plugin to fire the respective previous or next methods.

Answer 2

I Found a simpler way to solve this. as long as you know what step you want to show you can use this jquery function that will do a click

$("#Donation-t-2").get(0).click();

This example will show the third slide in the step