Refactoring Tabs

Question

HTML:

<ul>
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1" class="tab-content">content 1</div>
<div id="tab2" class="tab-content">content 2</div>

jQuery

$('#mode li:first').addClass('active');
$('#mode li.active').append('<span class="arrow">&nbsp;</span>');
$('#mode li a').click(function () {
    $('#mode li').removeClass('active')
    $('.arrow').remove();
    $(this).parent().addClass('active').append('<span class="arrow">&nbsp;</span>');
    var a = $(this).attr('href');
    $('.tab-content').hide();
    $(a).show();
    return false;
});

.. works, but looking ugly. Can it be simplified/reduced further?

Many thanks!

Answer 1

you know, some things can be optimized allways. put $('#mode li') into a variable, because the $() function needs time, also the HTML-String for the span can be put into a variable, better for refactoring,

if you really need the span with the arrow class. put the span in every li. put it via css to display: none; and if it's parent class is active it is viewd. two lines less ;-)

<ul>
    <li class="active"><a href="#tab1">tab1</a><span>&nbsp;</span></li>
    <li><a href="#tab2">tab2</a><span>&nbsp;</span></li>
</ul>
<div id="tab1" class="tab-content">content 1</div>
<div id="tab2" class="tab-content">content 2</div>


        var li = $('#mode li');
//        $(li[0]).addClass('active');
        li.click(function () {
            li.removeClass('active');
            $(this).addClass('active');
            var a = $(this).find('a').attr('href');
            $('.tab-content').hide();
            $(a).show();
            return false;
        });

CSS: (does this work? i think it does ... ??)

    ul li span{
    display: none;
...positioning...
    }

    ul li.active span{
    display: block;
    }

Answer 2

//add some context to #mode li, .arrow, .tab-content, and a, ie. $("#id",)
$('#mode li')
    .find(":first").addClass('active').end()
    .find(".active").append('<span class="arrow">&nbsp;</span>').end()
    .find('a').click(function () {
        var $this = $(this);
    $('.arrow').remove();
        $this.parent().parent().find("li.active").removeClass('active').end()
            .addClass('active').append('<span class="arrow">&nbsp;</span>');
    var a = $this.attr('href');
    $('.tab-content').hide();
    $(a).show();
    return false;
});

Answer 3

Not much of refactoring, but I edited the logic somewhat (assume #mode is realtive the ul)

$(function(){
    var mode = $('#mode');
    var arrow = $('<span/>', {'class': 'arrow'});
    $('li a', mode).bind('click.mytabs', function() {
        $('li', mode).removeClass('active');
        $(this).parent().addClass('active').append(arrow);
        var a = $(this).attr('href');
        $('.tab-content').hide();
        $(a).show();
        return false; 
    }).filter(':first').triggerHandler('click.mytabs'); // eq(0) works as well
});

see http://jsfiddle.net/wwMJL/ for live demo