Tabbed Content: Open 'tab 5' from a link in 'tab 1'

Question

I have some tabbed content on my site using jQuery. I am a novice when it comes to jQuery and I cannot solve my problem.

I have a link in the content div for tab-1 which, when it is clicked on, I want to jump to tab-5.

I have tried doing a few things but my knowledge is so limited I don't know how to do it so it works.

My HTML:

    <div class="tabbox">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Overview</li>
        <li class="tab-link" data-tab="tab-2">Features</li>
        <li class="tab-link" data-tab="tab-3">Images</li>
        <li class="tab-link" data-tab="tab-4">Compare</li>
        <li class="tab-link" data-tab="tab-5">Order</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        <a>click to open tab 5</a>
        </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-4" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
<div id="tab-5" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

My CSS:

.tabbox{
            width: 100%;
            margin: 0 auto;
        }



        ul.tabs{
            margin: 0 0 -1px 0;
            padding: 0px;
            list-style: none;
        }
        ul.tabs li{
            background: #fff;
            color: #ff3399;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        ul.tabs li.current{
            background: #fff;
            border-top: 1px solid #999999;
            border-right: 1px solid #999999;
            border-left: 1px solid #999999;
            border-bottom: 1px solid #fff;
            color: #ff3399;
        }

        .tab-content{
            display: none;
            background: #fff;
            border: 1px solid #999999;
            padding: 15px;
        }

        .tab-content.current{
            display: inherit;
        }

My JS:

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

Does anyone know how I can do this? Any help would be much appreciated!

Answer 1

Try This

assign class tab-link to 'a'

<a class="tab-link" data-tab="tab-5">click to open tab 5</a>

Jquery

  $(document).ready(function(){

  $('.tab-link').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $("li.tab-link[data-tab='"+ tab_id+"']").addClass('current');
    $("#"+tab_id).addClass('current');
  });


})

Jsfiddle http://jsfiddle.net/9gjtw/