JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeIt(id) 
{
    var theImg = document.getElementById(id),
             x = theImg.src.split("/"),
             t = x.length-1,
             y = x[t];

    if(y == 'cal2.png')
    {
        theImg.src='http://www.buildandbuy.com/cal3.png'
    }

    if(y == 'cal3.png')
    {
        theImg.src='http://www.buildandbuy.com/cal2.png'
    }
}
</script>
</head>

<body>
<a href="#" id="link"  onclick="changeIt('boxcolor1')"><img src='http://www.buildandbuy.com/cal3.png' name='boxcolor1' id='boxcolor1' border='0' /></a> 

<div id="div1"><img src="http://www.buildandbuy.com/cal4.png"></div>

CSS

body {background-image:url(http://www.buildandbuy.com/cal1.png); background-repeat:no-repeat;} 
#div1,
#div2{
    width: 1197px;
    height: 386px;
    margin: -6px;


}

JavaScript

$("#link").click(function() {
    if ($("#div1").is(':visible')) {
        $("#div1").toggle("slide", {direction: "up", easing: "easeInQuart"}, 600);
    } else {
        $("#div1").toggle("slide", {direction: "up", easing: "easeOutQuart"}, 800);
    }
});