JSFiddle - React, Tailwind, and code Playground

by Sledgehammer

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a href="http://www.kredyty.brzezina.pl/debug/tab_index.html">RIGHT TAB 1</a>
        </li>
        <li><a href="http://www.kredyty.brzezina.pl/debug/tab_index.html">RIGHT TAB 2</a>
        </li>
    </ul>
    <div class="tabs-spacer" style="height:0px"></div>
</div>

JavaScript

$(function () {
          var tabs = $("#tabs").tabs({
              beforeLoad: function (event, ui) {
                  ui.jqXHR.error(function () {
                      ui.panel.html(
                          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                          "If this wouldn't be a demo.");
                  });
              }
          });
          // move the nav to the bottom
          $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

          // TB: zmiana zawartości
          $.changeContent = function (url) {
              var currentTabIndex = tabs.tabs("option", "active");
              var tab = $(tabs.data('uiTabs').tabs[currentTabIndex]);
              tab.find('.ui-tabs-anchor').attr('href', url);
              // If cached initially. Remove cache then
              tab.data("loaded", false);
              tabs.tabs("load", currentTabIndex);
          }
          // TB: actual addTab function: adds new tab using the input from the form above

          $.addTab = function (nazwa, url, ctx) {
              tabs.find(".ui-tabs-nav").append('<li><a href="tab_struktura.html">New Tab</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>');

              tabs.tabs("refresh");
          }

      });