Tabs from a Blurbs Widget

page.html

<widget type="blurbs">
	<arg id="type">...</arg>
	<arg id="group">...</arg>
	<arg id="format"><div class="lw_blurbs_title">{title}</div><div class="lw_blurbs_body">{body}</div></arg>
	<arg id="class">tabbed</arg>
</widget>

tabify.css

/* must override LiveWhale's default clearing of <li>s in widgets */
.lw_widget .ui-tabs-nav li {
	clear: none !important;
}

tabify.js

function tabify() {
	$('.lw_widget_blurbs.tabbed > ul').each(function(index) {
		var tabMenu = $('<ul></ul>');
		$(this).find('.lw_blurbs_title').each(function() {
			var tabName = $(this).html().toLowerCase().replace(/[^a-z]+/g,'')+'-tabset'+index;
			$(this).hide().parent('li').attr('id',tabName);
			tabMenu.append('<li><a href="#'+tabName+'">'+$(this).html()+'</a></li>');
		});
		$(this).parent('.tabbed').prepend(tabMenu).tabs();
	});
}


$(document).ready(function() {
	tabify();
});

Great Job @jonwilcox! Be sure and tell @whitewhale about this.

Changed js so that tab id is added to the parent

instead of .lw_blurbs_body to fix an issue in IE7 where the

s didn't collapse even when all contents were hidden.

Correction: Changed js so that tab id is added to the parent

instead of .lw_blurbs_body to fix an issue in IE7 where the

s didn't collapse even when all contents were hidden.