Tabs methods

Programatically changes on the tabs container





Source code

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id='tabs'></div>

<script>
var tabs = jSuites.tabs(document.getElementById('tabs'), {
    animation: true,
    oncreate: function(el, div) {
        div.innerHTML = 'New content';
    },
    data: [
        {
            title: 'Tab 1',
            url: '/v4/content',
        },
        {
            title: 'Tab 2',
            url: '/v4/content/2',
        },
    ],
    padding: '10px',
});
</script>
<input type='button' value='Open second tab' onclick="tabs.open(1);">
<input type='button' value='Create a new tab' onclick="tabs.create('New tab');">
<input type='button' value='Remove first tab' onclick="tabs.remove(0);">
</html>