numbered tabs

by will525

HTML

<div class="stepDiv cf" id="cms-sidenav">
    <ul class="sidenav">
        <li class="formSteps sn active" style="margin: 0 10px 0 0"><a href="#step1" data-panel="sn-pan-1" class="formNumbers">1</a></li>
        <li class="formSteps sn"><a href="#step2" data-panel="sn-pan-1" class="formNumbers">2</a></li>
        <li class="formSteps sn"><a href="#step3" data-panel="sn-pan-1" class="formNumbers">3</a></li>
        <li class="formSteps sn"><a href="#step4" data-panel="sn-pan-1" class="formNumbers">4</a></li>
        <li class="formSteps sn"><a href="#step5" data-panel="sn-pan-1" class="formNumbers">5</a></li>
        <li class="formSteps sn" style="margin: 0 0 0 10px"><a href="#step6" data-panel="sn-pan-1" class="formNumbers">6</a></li>
    </ul>
</div>

JavaScript

$(function() {


//Form and Pager
    $('.sn a').click(function(e) {
        e.preventDefault();
        $('ul.sidenav li').not($(this).parent()).removeClass('active');
        $(this).parent().toggleClass("active");


        $('.stepContent').hide();
        var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn('fast'); //Fade in the active ID content
    });

    $('.stepContent').hide();
    $('.stepContent:eq(0)').show();
});