JSFiddle - React, Tailwind, and code Playground

by stodolaj

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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="en-us" />
    </head>
    <body>
        
        <div id="test_container">
            <div class="data_row background">
                <button type="button" id="expand_button" onclick="expand();">Expand</button>
            </div>
            <div id="expand_container">
                <div class="data_row background">
                    <div class="column_allow_overflow background">
                        Overflow allowed
                    </div>
                    <div class="column_no_overflow background">
                        Overflow NOT allowed
                    </div>
                    <div class="column_allow_overflow background">
                        Overflow allowed
                    </div>
                    <div class="column_no_overflow background">
                        Overflow NOT allowed
                    </div>
                </div>
                <div class="data_row background">
                    <div class="column_allow_overflow background">
                        Overflow allowed
                    </div>
                    <div class="column_no_overflow background">
                        Overflow NOT allowed
                    </div>
                    <div class="column_allow_overflow background">
                        Overflow allowed
                    </div>
                    <div class="column_no_overflow background">
                        Overflow NOT allowed
                    </div>
                </div>
                <div class="data_row background">
                    <div class="column_allow_overflow background">
                        Overflow allowed
   ...

CSS

#test_container {
    width: 540px;
}

.column_allow_overflow {
    float: left;
    width: 100px;
    height: 16px;
    margin-left: 4px;
    padding: 3px;
}

.column_no_overflow {
    float: left;
    width: 100px;
    height: 16px;
    margin-left: 4px;
    padding: 3px;
    overflow: hidden;
}

.background {
    background-color: #444444;
    color: #e5e5e5;
}

.data_row {
    height: 22px;
    width: 100%;
    padding-bottom: 22px;
    background-color: #cccccc;
}

#expand_container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    height: 100px;
    width: 100%;
    background-color: #cccccc;
}

JavaScript

var expand = function(e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    button.onclick = contract;

    expand_container.style.height = '160px';
    button.innerHTML = "Contract";
};

var contract = function(e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    button.onclick = expand;

    expand_container.style.height = '100px';

    button.innerHTML = "Expand";
};