JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<body>
  <div id="panel_menu">
    <div id="panel_menu_sidebar"></div>
    
    <div id="wells_menu_title" class="panel_menu_title"><div class="panel_menu_title_text">Wells</div></div> 
    <div id="layers_menu_title" class="panel_menu_title"><div class="panel_menu_title_text">Layers</div></div>
    
     <div id="wells_panel" class="panel_menu_content">
     
     After a new user understands validation functions, they have begun to see that perhaps CouchDB / CouchApps is a good candidate for their application. But maybe something is missing... Search engines don't treat Ajax applications with the same respect they do static HTML applications. Also, a fair proportion of users have JavaScript disabled, or are using a screen-reader type application, which may not understand Ajax.
     </div>    
     
 
     <div id="layers_panel" class="panel_menu_content">
     
     For more complex and customizable plugins that provide many options, it's a best practice to have default settings that can get extended (using $.extend) when the plugin is invoked. So instead of calling a plugin with a large number of arguments, you can call it with one argument which is an object literal of the settings you would like to override. Here's how you do it.    
     </div>
  </div>




<script language="javascript" type="text/javascript">
$(document).ready(function() 
{
    $('#panel_menu').tabbedPanelMenu({ titleSelector: '.panel_menu_title', 
                                       panelSelector: '.panel_menu_content',
                                       monoSlide: true });
    
});
    
</script>

  
</body>

CSS

body
{
   overflow: hidden;
   font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
   font-size: 10px;
}

.panel_menu_title
{
   display: block;
   width: 34px;
   height: 95px;
   float: left;
   
   clear: both;
}

.panel_menu_content
{
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -350px;

    width: 350px;    
    background: rgba(191, 191, 191, 0.80);
}

.panel_menu_title:hover
{
    cursor: pointer;
}

.panel_menu_title_text
{
   margin-top: 40px;
    
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
}

#panel_menu
{
   position: absolute;
   top: 47px;
   right: 0px;
   bottom: 0px;   
}

#panel_menu_sidebar
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 34px;
    height: 100%;
    
    background: rgba(191, 191, 191, 0.80);
    
    overflow: hidden;
}

#wells_menu_title
{
    background-color: #7F7F7F;
}

#layers_menu_title
{
    background-color: #1E90FF;
 
}

JavaScript

/** @file jQuery.tabbedPanelMenu.js
 
 //  @author CS.Brandt
 //  @date 05/17/2012
 */

(function($) {

    var methods = {

        init: function(options) {

            var $this = $(this);

            // save the options passed in
            // under $this.data.options
            $(methods).data('options', $.extend({
                animationOptions: {
                    queue: false,
                    duration: 300
                }

            }, options));

            options = $(methods).data('options');

            var allTitles = $(options.titleSelector);
            var allPanels = $(options.panelSelector);

            // get all positions first before any reflow
            var titleTop = [];
            var panelTop = [];

            allTitles.each(function(index, titleDiv) {
                titleTop.push($(titleDiv).position().top);
                //panelTop.push($this.position().top);
            });

            allTitles.each(function(index, titleDiv) {
                var titleWidth = $(titleDiv).width();

                // before animation, move titleDiv to the content container so the 
                // title tab slides out with the panel
                $(allPanels[index]).prepend(allTitles[index]);
                // adjust titldeDiv CSS
                $(allTitles[index]).css({
                    "position": "absolute",
                    "top": titleTop[index],
                    "left": (0 - titleWidth)
                });

                $(titleDiv).click(function() {
                    // if the monoSlide option is set
                    // only allow 1 slider to be open
                    // and auto close all sliders
                    // before opening a new one
                    if (options.monoSlide) {
                        methods.closeOpenPanels();
                    }

                    // get index to find matching panel for this title clicked
                    var titleDivIndex =...