Specifying that one set of HTML elements controls a corresponding set How could the following code be made more concise?

HTML structure

&lt;body&gt;
    &lt;header&gt;
        &lt;ul id="main-nav"&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/header&gt;
    &lt;section&gt;
        &lt;div class="toggle"&gt;
            &lt;div class="secondState"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    &lt;section&gt;
        &lt;div class="toggle"&gt;
            &lt;div class="secondState"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    &lt;section&gt;
        &lt;div class="toggle"&gt;
            &lt;div class="secondState"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
&lt;/body&gt;


jQuery

$('#main-nav li:eq(0)').on({
    mouseenter: function () {
        $('body section:eq(0)').find('.secondState').stop().fadeIn(600);
    },
    mouseleave: function () {
        if ($('body section:eq(0) .toggle').hasClass('current')) {
            return false;
        } else {
            $('body section:eq(0)').find('.secondState').stop().fadeOut(600);
        }
    }
});
$('#main-nav li:eq(1)').on({
    mouseenter: function () {
        $('body section:eq(1)').find('.secondState').stop().fadeIn(600);
    },
    mouseleave: function () {
        if ($('body section:eq(1) .toggle').hasClass('current')) {
            return false;
        } else {
            $('body section:eq(1)').find('.secondState').stop().fadeOut(600);
        }
    }
});
$('#main-nav li:eq(2)').on({
    mouseenter: function () {
        $('body section:eq(2)').find('.secondState').stop().fadeIn(600);
    },
    mouseleave: function () {
        if ($('body section:eq(2) .toggle').hasClass('current')) {
            return false;
        } else {
            $('body section:eq(2)').find('.secondState').stop().fadeOut(600);
        }
    }
});
The only part of the code that changes are the index values. What if you don't specific the index yourself, but use the indexof() to let it determ the index itself:

var index;
$('#main-nav li').on({
    mouseenter: function () {
        //alert($(this).index());
        index = $(this).index();
        $('body section:eq(' + index +')').find('.secondState').stop().fadeIn(600);
    },
    mouseleave: function () {
        if ($('body section:eq(' + index +') .toggle').hasClass('current')) {
            return false;
        } else {
            $('body section:eq(' + index +')').find('.secondState').stop().fadeOut(600);
        }
    }
});


I place the index into a variabe so the code doesnt have to determ the index over and over. Now i only fill the index when the mouseenters, because you will have the index of the element were  you entered with.

jsFiddle

I hope this helps.