jquery timer doesnt show div that is clicked instead it navigates to div based on timer
<p>I am toggling each 4 divs for 10 seconds using this jQuery function based on <code>a href id</code> value.  </p>

<p>The timer works fine and it changes 4 divs for every 10 seconds but when user clicks a particular div it doesn't navigate to particular div and stays there for a given period(ex 10 sec) and proceeds to next div from current div instead of that it goes to div based on timer value.</p>

<p>Can anyone help me regarding this? </p>

<pre><code>$(function() {
    $("a.menu").click(function() {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
});

$(function() {
    var counter = 0,
        divs = $('#cat1, #cat2, #cat3,#cat4');

    function showDiv() {
        divs.hide() // hide all divs
        .filter(function(index) {
            return index == counter % 4;
        }) // figure out correct div to show
        .show('fast'); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
        showDiv(); // show next div
    }, 15 * 1000); // do this every 10 seconds    
});​
</code></pre>
