JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>EDGENCY</title>
<script type="application/javascript" src="Resource/js/jquery-1.6.2.js"></script>
<script type="application/javascript" src="Resource/js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('clients_wrp');
myScroll = new iScroll('work_wrp');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script type="text/javascript">
var work = false;
var clients = false;
$(document).ready(function(){
$(".clients_wrapper").hide();
$(".work_wrapper").hide();
$("#clients").click(
function(){
if (!work) {
$(".clients_wrapper").show("slide", { direction: "right" }, 1100);
clients = true;
return false;
}
if (work){
$(".work_wrapper").hide("slide", {
direction: "left" }, 1100);
$(".clients_wrapper").show("slide", { direction: "right" }, 1100);
clients = true;
return false;
}
});
$("#work").click(
function(){
if (!clients) {
$(".work_wrapper").show("slide", { direction: "right" }, 1100);
work = true;
return false;
}
if (clients) {
$(".clients_wrapper").hide("slide", {
direction: "left" }, 1100);
$(".work_wrapper").show("slide", { direction: "right" }, 1100);
work = true;
return...