JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<p>Click to show and hide div.</p>	<a href="#" onclick="toggleDiv()">click</a>

<div id="text">Visible! Click again to make me disappear.</div>
<br />
<p>Click to change background.</p>	<a href="#" onclick="colorDiv()">change color</a>

<div id="box"></div>
<br />
<p>Move div using two functios.</p>
<button onclick="rightDiv()">left</button>
<button href="#" onclick="leftDiv()">right</button>

CSS

body {
    width: 100%;
    height: 100%;
}
a:active {
    color: blue;
}
#text {
    position: relative;
    opacity: 0;
    color: red;
}
#box {
    position: relative;
    top: 20px;
    width: 100px;
    height: 50px;
    background: red;
    -webkit-transition: all 2s;
    transition: all 2s;
}

JavaScript

/* Show/hide text */

function toggleDiv() {
    "use strict";
    var x = document.getElementById('text');
    if (x.style.opacity === "1") {
        x.style.opacity = "0";
    } else {
        x.style.opacity = "1";
    }
}

/* Change background */

function colorDiv() {
    "use strict";
    document.getElementById('box').style.background = 'blue';
}

/* Move Div using two functions */

function leftDiv() {
    "use strict";
    document.getElementById('box').style.left = '100px';
}

function rightDiv() {
    "use strict";
    document.getElementById('box').style.left = '0px';
}