Reduce JavaScript code. Double event, selector into one

Question

Any idea how to write this code better."the html is nested tabs" Two selectors and two similar events, in a function would be better or a pattern to reduce lines. eg .jsbin

$(function() {
  var $items  = $('#vtab>ul>li'),
      $items2 = $('#vtab2>ul>li');

  $items.mouseover(function() {
    var index = $items.index($(this));
    $items.removeClass('selected');
    $(this).addClass('selected');
    $('#vtab>div').hide().eq(index).show();
  }).eq(1).mouseover();

  $items2.mouseover(function() {
    var index = $items2.index($(this));
    $items2.removeClass('selected');
    $(this).addClass('selected');
    $('#vtab2>div').hide().eq(index).show();
  }).eq(1).mouseover();

});

Answer 1

HTML (add tab-panel class to tab containers):

<div id="vtab" class="tab-panel">

<div id="vtab2" class="tab-panel">

jQuery:

$(function () {

    $(".tab-panel").each(function () {

        var $currentPanel = $(this),
        $items = $currentPanel.find(">ul>li");

        $items.mouseover(function () {
            var $this = $(this),
            index = $items.index($this);

            $items.removeClass('selected');
            $this.addClass('selected');
            $currentPanel.find(">div").hide().eq(index).show();
        }).eq(1).mouseover();

    });

});

jsbin here

Answer 2

Give those #vtabs a class and it should be simple:

$(function() {
    $('.vtab > ul > li').mouseover(function() {
        var $this = $(this);

        $this.addClass('selected').siblings().removeClass('selected');
        $this.closest('.vtab').find('div').eq($this.index()).hide().siblings().show();
    }).each(function() {
        $(this).find('> ul > li').eq(1).mouseover();
    });
});

Although I'd try turning it into a plugin at this point.