How To: Jquery UI linkable tabs

I pulled this together with help from the amazing community that exists around web.dev. The solution is from: a comment at a blog.  After digging for awhile I finally found this and it worked like a charm.

So here is how we do this:

 

First you need Jquery, and Jquery UI with tabs.  I also included “fade” support but you can customize your own build.  From there, simply implement the tabs as is clearly outlined in the docs.

Next is the magic:

$('#tabs-set').tabs({
 'select': function(){$(this).index($(document.location.hash));},
 'load': function(event, ui){document.location.hash = ui.panel.id;},
 selected: -1
 });

This in its simplest form allows you to link to a given tab from outside the page.  A good use case is a homepage slider that needs to link to different areas of a sub page.  The url for this is: http://domain.com/page#tabid.

I built this into a WP install and it works great.

NOTE: selected: -1 simply hides all tabs on page load.  For my specific instance this was important. Many others won’t need this.