The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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, but this doesn’t work. Could someone to help find mistake?


    # June 21, 2013 at 11:13 am

    I remade my code and this works fine, but very interesting how works this solution, it stays riddle for me

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

    # June 21, 2013 at 5:24 pm

    This reply has been reported for inappropriate content.

    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-headers a”).filter(“:first”).addClass(“active”);

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

    var activeTab = $(this).attr(“href”);

    # 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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed