JQuery IntegrationJQuery tab integration with KoolChart

VIEW MORE FEATURES
VIEW HTML
EDIT ON CODEPEN
This example shows how to integrate the jQuery UI tabs plugin with KoolChart.
<div id="jqueryTabs">
<ul>
<li class="li_select"><a href="#chartHolder1">chart1</a></li>
<li><a href="#chartHolder2">chart2</a></li>
<li><a href="#chartHolder3">chart3</a></li>
</ul>
<div id="chartHolder1" style="width:850px;height:400px;"></div>
<div id="chartHolder2" style="width:850px;height:400px;"></div>
<div id="chartHolder3" style="width:850px;height:400px;"></div>
</div>

$(document).ready(function() {
$("#jqueryTabs").tabs();
$("#jqueryTabs > ul").click(function(event) {
var i, a, as, content,
tagName = event.target.tagName.toLowerCase();

if (tagName == "a" || tagName == "li") {
as = $("#jqueryTabs a");
for (i = 0 ; i < as.length ; i += 1) {
a = as[i];
$(a.parentNode).removeClass("li_select");
content = a.innerHTML;

if (content == event.target.innerHTML) {
$(a.parentNode).addClass("li_select");

/*
Investigate whether a chart has been created.
*/
if (!document.getElementById(content))
KoolChart.create(content, "chartHolder" + content.replace(/\D/g, ""), chartVars, "100%", "100%");
}
}
}
});
});