1

First please visit my fiddle: http://jsfiddle.net/VsqQ3/

Currently the first three tabs ( tab 1, tab 2, tab 3) are in display by default, and when I click on next> : tab 4, tab 5, tab 6 are being in displayed.

What I want: I want to display tab 4, tab 5, tab 6 by default. How can I get that?

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({
            collapsible: false,
            hide: {
                    effect: "slideUp",
                    duration: 20
            },
            show: {
                    effect: "slideDown",
                    duration: 200
            }
    });

    var all = $('.wrapper .main').addClass("passiv");
    var prev = $('.wrapper .prev');
    var next = $('.wrapper .next');
    var tab_count = all.length-1;
    var currentContainer = -1;

    prev.click(function(e) {
        e.preventDefault();   

        if (currentContainer != 0) {
            currentContainer -= 1;
            ctrlcontent(currentContainer);
        }
    });

    next.click(function(e) {
        e.preventDefault();

        if (currentContainer < tab_count) {
            currentContainer += 1;
            ctrlcontent(currentContainer);
        }
    }).trigger('click');

    function ctrlcontent(index_to_show) {
       all.removeClass("active").addClass("passiv");
       all.eq(index_to_show).removeClass("passiv").addClass("active");

       if (index_to_show == 0) prev.hide();
       if (index_to_show == tab_count) next.hide();
       if (index_to_show > 0) prev.show();
       if (index_to_show < tab_count) next.show();
    }


    $(function() {
            $( ".wrapper .inner" ).buttonset();
    });

2 Answers 2

1

If you look for the following line:

    var currentContainer = -1;

you can change this to

    var currentContainer = Math.floor(all.length / 2) - 1; // -1 needed as your indexing seems to start at -1 rather than 0

and it should always start it on the middle container

http://jsfiddle.net/VsqQ3/5/

4
  • Is it dynamic? What if I want to display last three tabs?
    – Asif
    May 21, 2013 at 9:48
  • 1
    just use the index of your tabs starting at -1 - -1 for first three, 0 for second and 1 for third
    – Pete
    May 21, 2013 at 10:01
  • It would be better for me if you show an example (jsfiddle example), as I am new to jquery
    – Asif
    May 21, 2013 at 10:17
  • 1
    There is a fiddle in the answer above, just play with the currentContainer (line 17) variable and switch in the values in the above comment and see what happens when you press run
    – Pete
    May 21, 2013 at 10:18
1

Just add next.click(); to your code :)

jsFiddle

next.click().click(); for last 3 tabs :)

jsFiddle

1
  • Is it dynamic? What if I want to display last three tabs?
    – Asif
    May 21, 2013 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.