JSFiddle - React, Tailwind, and code Playground

by Luke Harby

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>
<div id="pageWrapper">
			<h1><span></span> - this is the site</h1>
			<nav>
				<ul id="mainNav">
					<li><a href="#">Item 1<i class="fa fa-chevron-down"></i></a>
						<ul>
							<li><a href="#">Sub item 1</a></li>
							<li><a href="#">Sub item 2</a></li>
							<li><a href="#">Sub item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3<i class="fa fa-chevron-down"></i></a>
						<ul>
							<li><a href="#">Sub item 1</a></li>
							<li><a href="#">Sub item 2</a></li>
							<li><a href="#">Sub item 3</a></li>
							<li><a href="#">Sub item 4</a></li>
							<li><a href="#">Sub item 5</a></li>
							<li><a href="#">Sub item 6</a></li>
							<li><a href="#">Sub item 7</a></li>
							<li><a href="#">Sub item 8</a></li>
							<li><a href="#">Sub item 9</a></li>
							<li><a href="#">Sub item 10</a></li>
							<li><a href="#">Sub item 11</a></li>
							<li><a href="#">Sub item 12</a></li>
							<li><a href="#">Sub item 13</a></li>
							<li><a href="#">Sub item 14</a></li>
							<li><a href="#">Sub item 15</a></li>
						</ul>
					</li>
					<li><a href="#">Item 4<i class="fa fa-chevron-down"></i></a>
						<ul>
							<li><a href="#">Sub item 1</a></li>
							<li><a href="#">Sub item 2</a></li>
							<li><a href="#">Sub item 3</a></li>
							<li><a href="#">Sub item 4</a></li>
							<li><a href="#">Sub item 5</a></li>
							<li><a href="#">Sub item 6</a></li>
							<li><a href="#">Sub item 7</a></li>
						</ul>
					</li>
					<li><a href="#">Item 5<i class="fa fa-chevron-down"></i></a>
						<ul>
							<li><a href="#">Sub item 1</a></li>
							<li><a href="#">Sub item 2</a></li>
							<li><a href="#">Sub item 3</a></li>
							<li><a href="#">Sub item 4</a></li>
							<li><a href="#">Sub...

CSS

/* normalize.css 2011-09-22T17:42 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}body,button,input,select,textarea{font-family:sans-serif}a{color:#00e}a:visited{color:#551a8b}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em...

JavaScript

'use strict';

	$('html').removeClass('no-js');
	
	var chTitle = (function(){
	
		var title 			= $('title').text();
		var titleOutput 	= $('h1:eq(0) span');
		titleOutput.html(title);

	}());

		// dropdown function
	var dropDown = (function(){

		var mainNav 		= $('#mainNav');
		var navA 			= mainNav.find('li a');
		var navUL 			= mainNav.find('ul');
		var iconAll			= mainNav.find('i');
		navUL.transition({
			'max-height': 	'0px',
			'height': 		'0px',
			'overflow': 	'hidden',
			'display': 		'none'
		});
		navA.on('click',function(){
			var nextUL 			= $(this).next();
			var icon			= $(this).find('i');
			var nextULHidden 	= nextUL.css('display') === 'none';
			if(nextULHidden) {
				nextUL.css('display','block').transition({
					duration: 		1000,
					'height': 		'auto',
					'max-height': 	'1000px',
					easing: 		'ease-in'
				});
				$(this).addClass('active');
				icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
				console.log('hidden');
			}else if(!nextULHidden){
				nextUL.transition({
					duration: 		1000,
					'height': 		'0px',
					'max-height': 	'0px',
					easing: 		'ease-in',
					complete: function(){
						nextUL.css('display','none');
						console.log('animation ended');
					}
				});
				$(this).removeClass('active');
				icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
				console.log('visible');
			}else{
				console.log('some error');
			}
			return false;
		});

	}());