JavaScript Tabs

Invoke the setTitleAt method of the jqxTabs. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>
<div style='margin-top: 10px;'>
    <input type="button" id='jqxButton' value="Add new tab" />
    <input type="button" id='jqxButton1' value="Show tab 3" />
    <input type="button" id='jqxButton2' value="Hide tab 3" />
</div>

JavaScript

var visable = true;
$('#jqxTabs').jqxTabs({
     width: 800,
     height: 150,
     theme: 'energyblue'
 });
 $('#jqxButton').jqxButton({
     width: '300px',
     height: 30,
     theme: 'energyblue'
 });
 $('#jqxButton1').jqxButton({
     width: '300px',
     height: 30,
     theme: 'energyblue'
 });
 $('#jqxButton2').jqxButton({
     width: '300px',
     height: 30,
     theme: 'energyblue'
 });

 $('#jqxButton').click(function () {
     var length = $('#jqxTabs').find('li').length;
     var title = "test" + length;
     $('#jqxTabs').jqxTabs('addAt', length, title, "");
     

 });

 $('#jqxButton1').click(function () {
         $("#jqxTabs .jqx-tabs-title:eq(2)").css("display", "block");
         
 });


 $('#jqxButton2').click(function () {
          $("#jqxTabs .jqx-tabs-title:eq(2)").css("display", "none");
 });