Tabify a Blurbs Widget

It’s easy to add a tabbed interface to any page using LiveWhale blurbs and a simple javascript.

Here’s how:

  1. Just create the blurbs as usual — the blurb title will be the tab name.
  2. Create a blurbs widget with a class of “tabbed”.
  3. Drop into any page.

Add the tabify() script to any page that needs it, or include it in a common scripts file.

Notes:

  • Tabify requires jQuery UI Core, jQuery UI Widget, and jQuery UI Tabs.
  • One small addition to your CSS is necessary to override a default LiveWhale widget style. The style is included in the gist.