JSFiddle - React, Tailwind, and code Playground

by ryanjm

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Evented Programming</title>


  </head>
  <body>
    <form action="./index.html" method="get">
      <input type="text" name="text" />
      <a href="#" class="js-submit">Submit</a>
    </form>

    <br/>
    <br/>
    <br/>

    <a href="#" class="js-hide" data-hide=".hide">Hide Box</a>

    <div class="hide">
      This box should be hidden
    </div>

    <br/>
    <br/>
    <br/>

    <select name="change-boxes" class="js-change-box" data-change-box=".box">
      <option value="0">Option 0</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>

    <div class="box">
      
    </div>
    
    
    <br/>
    <br/>
    <br/>

    <ul class="tabs">
      <li data-content="first" class="selected">First</li>
      <li data-content="second">Second</li>
      <li data-content="third">Third</li>
    </ul>

    <div class="pane" id="first">First content</div>
    <div class="pane" id="second">Second content</div>
    <div class="pane" id="third">Third content</div>

    <br/>
    <br/>
    <br/>

    <ul class="tabs2">
      <li data-pane="first2" class="selected">First</li>
      <li data-pane="second2">Second</li>
      <li data-pane="third2">Third</li>
    </ul>

    <div class="pane" id="first2">First content</div>
    <div class="pane" id="second2">Second content</div>
    <div class="pane" id="third2">Third content</div>

    <br/>
    <br/>
    <br/>

  </body>
</html>

JavaScript

$(document).ready(function(){
        $("body").on("click",".js-submit",function(){
              $(this).parent("form").submit();
              return false;
        }); 
        
        $("body").on("click",".js-hide",function(){
          var sel = $(this).attr("data-hide");
          $(sel).hide();
          });

        $("body").on("change",".js-change-box",function(){
          var sel = $(this).attr('data-change-box');
          var value = $(this).val();
          $(sel).html("You selected option " + value);
          });
        $(".js-change-box").trigger("change");

        $("body").on("change", "ul.tabs", function(){
          var selected = $(this).data("selected");

          var pane = $("div#"+ $(selected).attr("data-content") ).show();

          if ($(this).data("pane") != undefined) {
            $(this).data("pane").hide(); 
          }
          $(this).data("pane", pane);
          });



        // Internal "browser" events
        $("ul.tabs").click(function(e){
          $(this).data("selected", e.target);
          
          $(e.target).addClass("selected").siblings().removeClass("selected");

          $(this).trigger("change");
        });

        $(".pane").hide();
        $("ul.tabs li").first().trigger("click");




        // Tabs 2

        $("body").on("change", "ul.tabs2", function(){
           $(this).data("panes").each(function(i,e) { $(e).hide(); })
           $(this).data("pane").show();
        });


        // Browser events
        $("ul.tabs2 li").click(function(){
          $(this).trigger("change");
        });

        $("ul.tabs2").bind("change", function(e){
            var sel = $(e.target).attr("data-pane");
            $(this).data("pane", $("#"+sel));
        });

        $("ul.tabs2").data("panes", 
            $("li", this).map(function() {
              return $("#"+$(this).attr("data-pane")); 
            })
        );

        $("ul.tabs2 li").first().trigger("click");
      });