JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<div id="who">
    <h1 class="who closed">About</h1>
    <div class="content">
      <div id="latest" class="three_columns">
       
        <p>
          <strong>Boo!</strong> 
        </p>
        
      </div>
    </div>
    </div>

 <div id="what">
    <h1 class="what closed">Skills</h1>
    <div class="content">
      <div id="consulting" class="three_columns">
        
        <p>
          <strong>Boo2!</strong> 
        </p>
        
      </div>
    </div>
    </div>

CSS

div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto; position: absolute;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px;  }

#latest{
    padding-left: 30px;
}

/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/

h1.who, h1.what, h1.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}

h2.who, h2.what, h2.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}

.blue { color: #00b9f1; }
.green { color: #99cc00; }

/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/

/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }

/* Elements with a black border at the bottom */
/*h1, div#footer, div.content { border-top: 1px solid black; }*/


/*** Styles for the header and footer section ***/
/* Styles only for the header */
/*div#header { border-top: 5px solid black; }*/

/* Styles for both the header and the footer */
/*div#header, div#footer { height: 40px; }
div#footer div#styleswitcher { text-align: center; }
div#footer div#styleswitcher a { color: gray; }
*/
/* Styles only for the footer */
/*div#footer { border-bottom: 5px solid black; }*/

#cent {

    margin-left: auto;
    margin-right: auto;
    width: 
}

/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; display: inline-block; }

JavaScript

$(function() {

    // Hide all closed sections
    $(".closed").next().hide();
    
    // Add slide functions to all sections (h1 elements)
    $("h1").click(function () {
        if($(this).is('.closed')) {
            $(".open").delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).delay(200, function() { $(this).next().slideDown("slow"); });
            $("h1").deactivateElement();
            $(this).activateElement();
        }
        else if($(this).is('.open')) {
            $(this).delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).deactivateElement();
        }
    });
    
    // Add a function to toggle the CSS styles
    $("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });
    
    // Add hover functions to all sections (h1 elements)
    $("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });
    
    
    // Delay the call to (slide) functions
    // => http://james.padolsey.com/javascript/jquery-delay-plugin/
    $.fn.delay = function(time, callback) {
        jQuery.fx.step.delay = function() {};
        return this.animate( { delay: 1 }, time, callback);
    }
    
    // Set an element class to 'open' or 'closed'
    $.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
    $.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }
    
    // Do this at start
    initialize();
    $(".who").delay(600, function() { $(this).next().slideDown("slow"); });
    $(".who").activateElement();
});

    
// Initialization function
function initialize () {
    flag = true;
    dark = document.getElementById("dark_css");
    dark.disabled = flag;
    
    // Set year in copyright section
    document.getElementById('year').innerHTML = (new Date()).getFullYear();
}

// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
 ...