JSFiddle - React, Tailwind, and code Playground

jenniferperrin.com July 2014

by Jennifer Perrin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/0.0.22/jquery.velocity.min.js"></script>
<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios visuallyhidden" type="radio" name="tab-radios" checked="" />
<input id="panel-2-ctrl" class="panel-radios visuallyhidden" type="radio" name="tab-radios" />
<input id="panel-3-ctrl" class="panel-radios visuallyhidden" type="radio" name="tab-radios" />
<input id="panel-4-ctrl" class="panel-radios visuallyhidden" type="radio" name="tab-radios" />
<input id="panel-5-ctrl" class="panel-radios visuallyhidden" type="radio" name="tab-radios" />
<input id="nav-ctrl" class="panel-radios visuallyhidden" type="checkbox" name="nav-checkbox" />
           
<header id="introduction">
  <h1 class="logo"><span class="m1 big">Jennifer</span><span class="m2 big">Perrin</span></h1>
</header>

<ul id="tabs-list">
    <label id="open-nav-label" for="nav-ctrl"></label>
    <li id="li-for-panel-1"><label class="panel-label" for="panel-1-ctrl">Radio Toggles</label></li>
    <li id="li-for-panel-2"><label class="panel-label" for="panel-2-ctrl">Input :checked</label></li>
    <li id="li-for-panel-3"><label class="panel-label" for="panel-3-ctrl">The Tabs</label></li>
    <li id="li-for-panel-4"><label class="panel-label" for="panel-4-ctrl">Tab :hover</label></li>
    <li id="li-for-panel-5"><label class="panel-label" for="panel-5-ctrl">Menu</label></li>
    <label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>

<article id="panels">
  <div class="container">
    <section id="panel-1">
      <main>
        <h1>Radio Toggles</h1>
        <p>In this demo, <code>labels</code> for hidden <code>radios</code> toggle the content. This is based on the behavior in which clicked <code>labels</code> for a <code>radio</code> or <code>checkbox</code> input will check that <code>input</code>.</p> 
<pre>&lt;input id="radio-1" type="radio" name="demo-radios"&gt;
&lt;input id="radio-2" type="radio" name="demo-radios"&gt;</pre>
   ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
ul#tabs-list {
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
  margin: 0;
  padding: 0;
}

label.panel-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  color: #bdc3c7;
  cursor: pointer;
  background-color: #ecf0f1;
  -webkit-transition-property: border-top, background-color, color;
  transition-property: border-top, background-color, color;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
label.panel-label:hover {
  color: #c0392b;
}

#panels {
  background-color: white;
}
#panels .container {
  margin: 0 auto;
  width: 90%;
}
#panels section header label.panel-label {
  padding: 12px 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#panels section main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
  overflow-y: hidden;
}

#panel-1-ctrl:checked ~ #panels #panel-1 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-2-ctrl:checked ~ #panels #panel-2 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-3-ctrl:checked ~ #panels #panel-3 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-4-ctrl:checked ~ #panels #panel-4 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-5-ctrl:checked ~ #panels #panel-5 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

@media all and (max-width: 767px) {
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    max-height: 46px;
    opacity: 1;
  }

  #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    max-height: 46px;
    opacity: 1;
  }

  #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
   ...

JavaScript

(function(){

	// Animate logo on hover

	// vars
	var logo = $(".logo");
	var m1 = $(".logo .m1");
	var m2 = $(".logo .m2");
	var easings = ["easeOutQuad","easeInOutQuad","easeInOutBack","easeOutElastic","easeOutBounce"];
	var values = [[20,180,0],[170,170,0],[20,360,0],[350,0,0],[0,40,360],[0,320,0],[0,180,0],[180,180,0]];
  
  m1.colh = [100,110,120];
  m2.colh = [255,192,0]

	// logo hover
	logo.hover(function(){
		m1.logoanim(1);
		m2.logoanim(2);
	}, function(){
		m1.velocity("reverse");
		m2.velocity("reverse");
	});

	// logo anim prototype
	$.fn.logoanim = function(item) {

	// duration
	var duration = Math.round(Math.random()*400)+200;

	// anim object
	var a = Math.floor(Math.random() * values.length);

	// easing
	var e = Math.floor(Math.random() * easings.length);
	var easing = easings[e];
	if(e >= 2) {duration *= 2}

	// velocity
	$(this).velocity({
		rotateX: values[a][0] * (Math.round(Math.random())*2-1),
		rotateY: values[a][1] * (Math.round(Math.random())*2-1),
		rotateZ: values[a][2] * (Math.round(Math.random())*2-1),
     colorRed : this.colh[0],
		colorGreen : this.colh[1],
		colorBlue : this.colh[2]
	},{
		duration: duration,
		easing: easing
		});
	}

	// animate logo on document load
	$(document).ready(function() {
		m1.logoanim(1);
		m1.velocity("reverse");
		m2.logoanim(2);
		m2.velocity("reverse");
	});

})();