jQuery Plugin - simple feature help

Question

I'm using this jQuery Plugin to present a sort of "features list" on a website I'm working on. This plugin is pretty straightforward and effectively does just what this demo shows.

There is one piece of functionality I would like to implement in this, however. I would like to be able to put a "previous" and "next" link in the content area of each tab, to switch to the, well, previous or next set of content.

Can anyone offer some help in what should be done to implement this functionality with this jQuery Plugin?

Thanks so much for any assistance you may be able to offer...

Answer 1

You just need to add previous/next links that call .click() (the equivalent of .trigger('click') on the right tab element.

Demo →

Markup, CSS, and JS are identical to the demo linked in the question except for the following:

HTML

<div id="content">
    <!-- snip, no changes here -->
    <span id="featureNav">
        <a id="prev">&lt; prev</a>
        |
        <a id="next" href="javascript:;">next &gt;</a>
    </span>
</div>

CSS

#content {
    position: relative;
}

#featureNav {
    position: absolute;
    bottom: 0;
    right: 0; 
}

JavaScript

$('#prev').click(function ()
{
    var $current = $('#tabs li a.current'),
        $prev = $current.parent().prev();

    if (!$prev.length)
    {
        $prev = $current.parent().siblings(':last');
    }

    $prev.find('a').click();
});

$('#next').click(function ()
{
    var $current = $('#tabs li a.current'),
        $next = $current.parent().next();

    if (!$next.length)
    {
        $next = $current.parent().siblings(':first');
    }

    $next.find('a').click();
});

If you understand how jQuery plugins are written, it should be quite easy to incorporate this code into the plugin. I'm not sure if you wanted a one-off solution, or a change to the plugin itself.