[kavvsonParticipant]

My solution – I got 1 issue with it when I check if its opened it adds opened attribute, when I close it it should remove the opened atribute, can u help me with that?

HTML:

<div class="s">
<ul id="nav">
<li>
<a href="#" rel="1.php" t="Title">
<i class="icon-dashboard"></i>
<span>Alink</span>
</a>
</li>
<li>
<a href="#" rel="serverfiltering_paging_and_sorting_data.php" t="Pg">
<i class="icon-dashboard"></i>
<span>Slink</span>
</a>
</li>
</ul>
 
<div class="sidebar-title">
<span>Cos</span>
</div>
</div>

<div id='jqxTabs'>
  <ul>
    <li></li>
  </ul>
  <div></div>
</div>

Javascript:

// Create jqxTabs.
$('#jqxTabs').jqxTabs({ width: 580, height: 200, showCloseButtons: true });
$('#jqxTabs').jqxTabs("removeFirst"); //here removes the empty tab

//here the function must return the content, and the ajax must be async false for this purpose
var loadPage = function (url) {
    var result = null;
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
    });
    return result;
}

$('div.s span').click(function() {
    var getvalue = $(this).attr('rel');

    $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
    $('#jqxTabs').jqxTabs('ensureVisible', -1);
});

For better understanding check: http://jsfiddle.net/charlesrv/h4573ykv/1/

For the new condition(check if its opened), use a custom attribute so checking would be easier:

$('div.s span').click(function() {
    var getvalue = $(this).attr('rel');
    var opened = $(this).attr('opened');

    if (!opened) {
        $(this).attr('opened', true);
        $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
        $('#jqxTabs').jqxTabs('ensureVisible', -1);
    }
});

[Author]

Posts