How do I shorten my JQuery tabs?

Question

I'm trying to clean up my JQuery code for my tabs. I have 3 different styles. How do I make the following shorter?

$(document).ready(function () {
    $('.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

Your help will be appreciated! http://michellecantin.ca/test/features/tabs/

Answer 1

This should work:

$(document).ready(function () { // use one document.ready
    $('ul[class*="tabs-style"] li').click(function (e) { // and one click handler
        var self = $(this), // cache DOM lookup
            styles = {
                "tabs": ".tabs-style",
                "content": ".tab-content-style"
            },
            i = self.parent().hasClass('.tabs-style1') ? '1' : self.parent().hasClass('.tabs-style2') ? '2' : '3', // get style number
            tab_id = self..attr('data-tab');
        styles.tabs += i; // concatenate style number
        styles.content += i;
        self = $(styles.tabs + ' li'); // re-lookup DOM element and cache again
        self.removeClass('current'); // unsure why you are doing this
        $(styles.content).removeClass('current');
        self.addClass('current');
        $("#" + tab_id).addClass('current');
    });
});

While I'm sure someone more clever than I can refactor this further, I agree whole-heartedly with @gloomy.penguin in that reducing the number of lines of code only serves to make it less readable (and hence less maintainable).

If you really want this to take up less space in a .js file, use a minification tool (there are plenty of them).

Answer 2

You can make your code more versatile and future-proof by doing this:

First, add a tabbar class to all elements that feature tabs. Then, this should be your jQuery:

$(function () {
    $('.tabs>li').click(function () {
        var tab_id = this.getAttribute('data-tab');
        var target = document.getElementById(tab_id);
        $(this.parentNode).children().removeClass("current");
        $(target.parentNode).children().removeClass("current");
        $(this).addClass('current');
        $(target).addClass('current');
    });
});

This works by finding the parent node of the tab that you clicked, and the panel that's the target, and using that as the basis for hiding the other tabs/panels, rather than depending on similar class names.