Question

I am using Fancy Sliding Form .. Demo Click here:

There are some tabs/buttons for navigation at the bottom.

I need to be able to tigger the different steps (auto clicking) when I click on a link not directly on the tab with my mouse.

I’ve tried adding an id to each step and then create a link: Next Tab
then the jquery below:

<script>
$("#mytrigger").click(function(e) {
 e.preventDefault();
 $("#step2").trigger("click");
});
</script>

but that didn’t work.

UPDATE:

I put this together and it’s not working … I’m I not doing this right?

<a class="mytrigger" href="#">Click Here</a>
<script>
$('a.mytrigger').click(function(e){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
e.preventDefault();
});
</script>

Here is my Nav:

<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">Step 1</a>
</li>
<li>
<a href="#">Step 2</a>
</li>
<li>
<a href="#">Step 3</a>
</li>
<li>
<a href="#">Step 4</a>
</li>
<li>
<a href="#">Step 5</a>
</li>
<li>
<a href="#">Step 6</a>
</li>
</ul>
</div>

Answer 1

I’m not really able to test this, but that should work (based on the source of the plugin) :

$('a.mytrigger').click(function(e){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
e.preventDefault();
});

The ‘current’ var is defined in sliding.form.js

Edit :
Well, I was wrong, sorry.
Here is a working demo : http://jsfiddle.net/dCmA7/1/
(full size : http://jsfiddle.net/dCmA7/1/embedded/result/)

To keep things as simple as possible, you don’t have to modify the navigation.
Create your link like this :
a href="#step1" class="mytrigger">link

Then add this javascript :

$("a.mytrigger").click(function(e){  
    var index = $(this).attr("href").substr(5);  
    $('#navigation li:nth-child('+parseInt(index)+') a').click();  
    e.preventDefault();  
});