Sridhar Katakam

Genesis and WordPress Tutorials

Vertical tabs with jQuery UI for instant content swapping in WordPress

by 2 Comments

The motivation behind this article is this Twitter conversation.

Looking to have some links at the left which when clicked load the corresponding content on the right side w/o loading the full page?

Here's one way of setting this up in WordPress.

Step 1

Create a file named tabs-init.js in your child theme's js (create if not existing) directory with this:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hello, thnx for good method, but how to add jQuery Effects? (example slide effect)

    my code working, but without effect:

    jQuery(document).ready(function($) {
    $(‘#tabs’).tabs({
    hide: {
    effect: “slide”,
    duration: 1000
    }
    });
    });

    Can U help?

    Reply

  • Hi Sridhar,

    This is great! I’d love to add autoplay, so that the tabs become a slider. Is that possible?

    Thanks,
    Maddie

    Reply
    • >