(function($){
    $.fn.extend({ 
        tabify: function() {

            return this.each(function() {

                //Creating a reference to the object
                var obj = $(this);

                //Create a reference for all headings and it's content using .next()
                //Remember to pass the object reference "obj" into the identifier.
                var headings = $('h2', obj);
                var tabContent = headings.next();

                //We wan't to hide the headings and the content
                headings.hide();
                tabContent.hide();
                //But we want to show content of the first tab since it's selected by default. 
                tabContent.eq(0).show();

                //Prepend the object with the tab container (ul).
                obj.prepend('<ul class="tabs"><\/ul>');

                //For every heading create an item (<li>)
                headings.each(function() {
                    
                    var label = $(this).text();
                    $("ul.tabs", obj).append("<li>" + label + "</li>");
                });
                var tabs = $("ul.tabs li", obj);

                //And add .sel class to first item
                tabs.eq(0).addClass("sel");

                //Create a reference to the tabs for each obj
                var tabs = $("ul.tabs li", obj);

                tabs.click(function() {

                    //When a tab is clicked "de-activate" the old one
                    tabs.removeClass("sel");
                    tabContent.hide();
                    $(this).addClass("sel");

                    //And display the clicked tab
                    var current = tabs.index($(this));
                    tabContent.eq(current).show();
                });
            });
        }
    });
})(jQuery);

$(function() {
    $('#tabify').tabify();	
});