JSFiddle - React, Tailwind, and code Playground

by jwilson3

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/cupertino/jquery-ui.css">
<div style="height: 400px;">This fiddle updates the hash in the browser URL bar without scrolling down the page, by modifying the ids of the jQuery UI Tabs widget trigger elements during creation of the tabs.  Open this fiddle's HTML Result frame in a new window to see the hash get updated in the URL bar of your browser.
    <p>
        Current URL Hash: <span class="current"></span><br />
        Actual tab ID: <span class="actual"></span>
    </p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#Cats"><span>Cats </span></a></li>
        <li><a href="#Dogs"><span>Dogs</span></a></li>
        <li><a href="#Bananas"><span>Bananas</span></a></li>
    </ul>
    <div id="Cats"><h2>Kittens</h2>
        <table style="height: 1000px">
            <tr><td>Hello. This is a tab about kittens.</td></tr>
        </table>
    </div>
    <div id="Dogs"><h2>Puppies</h2>
        <table style="height: 1000px">
            <tr><td>Hello. This is a tab about puppies.</td></tr>
        </table>
    </div>
    <div id="Bananas"><h2>Bananas</h2>
        <table style="height: 1000px">
            <tr><td>Hello. This is a tab about bananas.</td></tr>
        </table>
    </div>
</div>

CSS

p { padding: 50px; }

JavaScript

// Turn article table of contents into jQuery UI tabs.
var $tabs = $("#tabs");
$tabs.tabs({
    create: function(event, ui) {
        // Adjust hashes to not affect URL when clicked.
        var widget = $tabs.data("uiTabs");
        widget.panels.each(function(i){
            this.id = "uiTab_" + this.id;
            widget.anchors[i].hash = "#" + this.id;
            $(widget.tabs[i]).attr("aria-controls", this.id);
        });
    },
    activate: function(event, ui) {
        // Update the window URL bar with the original "clean" tab id.
        window.location.hash = ui.newPanel.attr("id").replace("uiTab_", "");
        $('.current').html(window.location.hash);
        $('.actual').html(ui.newPanel.attr("id"));
    },
});