Grow your CSS skills. Land your dream job.

jQuery tabs

  • # June 21, 2013 at 8:25 am

    Hey guys
    I want to implement jQuery tabs in a different way than default example(through adding id ), found this solution http://codepen.io/Kuzyo/pen/fHhik, but this doesn’t work. Could someone to help find mistake?

    Thanks.

    # June 21, 2013 at 11:13 am

    I remade my code and this works fine http://codepen.io/Kuzyo/pen/fHhik, but very interesting how works this solution, it stays riddle for me

    if ($(“ul.tab-headers”).length)
    $(“ul.tab-headers”).tabs(“.tab-panes > div”, {
    current: “active”
    });

    # June 21, 2013 at 5:24 pm

    I don’t see that code in your Pen and I’m not familiar with jQuery UI… and the API doesn’t seem to be very clear on this too.

    I wouldn’t use CSS to hide the tabs, in case JS is disabled the tabs become inaccessible. Reworked the JS a little bit (fixes bug with hiding panes with JS and toggling the active class):

    $(“.tab-pane”).not(“:first”).hide();
    $(“.tab-headers a”).filter(“:first”).addClass(“active”);

    $(“.tab-headers a”).on(“click”, function() {
    $(“.tab-pane”).hide();
    $(“.tab-headers a”).removeClass(“active”);

    var activeTab = $(this).attr(“href”);
    $(this).addClass(“active”);
    $(activeTab).show();
    });

    # June 22, 2013 at 2:15 am

    > I’m not familiar with jQuery UI…

    I always thought knowing how to use jQ UI is a very important, did you write widgets from scratch?

    @CrocoDillon thanks for your help

    # June 22, 2013 at 5:29 am

    I just never had the need for jQuery UI, but I do plan to use it when I need for example something draggable/selectable/sortable… for widgets like tabs, I don’t think so. Easy to do from scratch.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".