JSFiddle - React, Tailwind, and code Playground

by vaff

JavaScript

(function($) {
  var $module = $("div.module"),
      $ul = $("<UL></UL>"),

      init = function(e) {
        $module
          .hide()      
          .find('h2')
            .each(
              function(i,elem) { 
                $li = $("<LI></LI>")
                  .appendTo($ul)
                  .html(elem.outerText);
              }
        );

        $ul
          .insertBefore($module[0])
          .delegate("li", "click", handleClick)
          .find("li").eq(0)
            .addClass("current");

        $module.eq(0).show();
      },

      handleClick = function(e) {
        $ul
          .find('li.current')
          .removeClass('current');

        var $this = $(this)
          .addClass('current');

        $module.hide();
        $("#"+$this.html().toLowerCase()).show();
      };
  
  init();
})(window.jQuery);