JSFiddle - React, Tailwind, and code Playground

by Ryan Brewer

HTML

<div class="opc">
    <div id="opc-billing">This tan box is opc-billing</div>
</div>
<button onclick="runit()">run it</button>
<button onclick="animateit()">animate it</button>
<button onclick="resetit()">reset it</button>

CSS

.opc {
    height: 200px;
    width: 100%;
    background-color: slateGray;
}
#opc-billing {
    height: 200px;
    width: 80%;
    margin: 0px auto;
    background-color: burlywood;
    line-height: 200px;
    text-align: center;
}

JavaScript

// Set Global Variable
var x = $("#opc-billing").height();
var opc = $(".opc");

// Regular set height function
function runit() {
    if (x === 200) {
        alert("opc-billing height is " + x + "px" + "\nSo lets make opc 600px");
        opc.height(600);
    }
}

// Fancy schmancy set height function
function animateit() {
    if (x === 200) {
        alert("opc-billing height is " + x + "px" + "\nSo lets make opc 600px");
        opc.animate({height:"600px"},"slow");
    }
}

// Reset it an run it again if you like!
function resetit() {
    opc.height(200);
}