JSFiddle - React, Tailwind, and code Playground

by glennpierce

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Electricity Usage</title>

    <link rel="stylesheet" href="elecusage.tabs.css" type="text/css" media="screen, projection"/>

    <script src="jquery-1.7.2.min.js"></script>

</head>

<body>

    <div id="page-wrap">

        <div id="view_tabs">
            <ul>
                <li><a href="#basic">Basic</a></li>
                <li><a href="#advanced">Advanced</a></li>
           </ul>    
            <div id="basic" class="ui-tabs-panel ui-tabs-hide">
                <div id="time_tabs">
                    <ul>
                        <li><a href="#now">Now</a></li>
                        <li><a href="#day">Day</a></li>
                        <li><a href="#week">Week</a></li>
                   </ul>
                    <div id="now" class="ui-tabs-panel">
                           <p>Now</p>  
                    </div>
                    <div id="day" class="ui-tabs-panel ui-tabs-hide">
                            <p>Day</p>
                    </div>
                    <div id="week" class="ui-tabs-panel ui-tabs-hide">
                            <p>Week</p>
                    </div>
                </div>
        </div>
   
          <div id="advanced" class="ui-tabs-panel ui-tabs-hide">Advanced</div>
        </div>
        
    </div>

</body>

</html>

CSS

*                                    { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, Sans-Serif; }

#page-wrap                            { width: 700px; margin: 25px auto; }

p                                   { padding: 20px; }

.ui-tabs                             { zoom: 1; }
.ui-tabs .ui-tabs-nav                 { list-style: none; position: relative; padding: 1px 1px 0; overflow: hidden; 
                                      top: 1px; z-index: 1000; height: 20px; }
.ui-tabs .ui-tabs-nav li             { position: relative; float: left; border: 1px solid #ccc; 
                                      border-bottom-width: 0 !important; margin: 0 2px -1px 0; background: #ccc; }
.ui-tabs .ui-tabs-nav li a             { float: left; text-decoration: none; padding: 1px 10px; color: black; }
.ui-tabs .ui-tabs-nav 
li.ui-tabs-selected                 { padding-bottom: 1px; border-bottom-width: 0; background: white; }

.ui-tabs .ui-tabs-panel             { display: block; border-width: 0; background: none;
                                      border: 1px solid #ccc; position: relative; min-height: 200px; height: auto !important; height: 200px; }
.ui-tabs .ui-tabs-hide                 { display: none !important; }

JavaScript

$(function() {

    $('#time_tabs').tabs();
    $('#view_tabs').tabs();

    $('#view_tabs').on("tabsselect", function(event, ui) {
        //if (ui.panel.id != 'basic' && ui.panel.id != 'advanced') {
        //    return true;
        //}
        alert('hello');
        return true;
    });

});