JSFiddle - React, Tailwind, and code Playground

by wolfpackt99

HTML

<html>
<head>
</head>
<body>
    <div><a href="#" id="hide">hide</a> | <a href="#" id="show">show</a>
    <div class="contentRow" id="parent">
    <div class="column_30Percent" id="groups">
        werewrwer
    </div>
    <!-- /.column_30Percent -->
    <div class="column_70Percent" id="list">
        tttttttttt
    </div>
    <!-- /.column_70Percent -->
</div>
</body>
</html>

CSS

#groups { background: red;}
#list { background: blue; }
/*

Media Query Style Sheet for Firm Manager v3.0
Author: Jonathan "Scott" Guthrie
Version: 1.00.009 (modified on 05/30/2012)
©2012 LexisNexis

*/



/* ^7 ******************** MEDIA QUERIES ********************/

/* ^7a ********** Smaller Desktop Screens **********/
/*********************** AND ***********************/
/* ^7b ********** Tablet Support: Landscape *********/
@media only screen and (max-width: 1160px) {
    header h1 {
        background-image: url(images/header_logo.png);
        text-indent: -1000em;
        background-position: 0px -47px;
        background-repeat: no-repeat;
        margin: 0px;
        padding: 0px;
        top: 3px;
        height: 35px;
        width: 407px;
        position: absolute;
    }
    input[type="text"]#contactSearch {
        width: 88%;
    }
}


/* ^7b ********** Tablet Support: Portrait **********/
@media only screen and (max-width: 1023px) {
    #mainNavTabs a {
        margin-right: -11px;
    }
    #mainNavTabs li.floatRight {
        margin-right: 11px;
    }    
    .contentRow {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .column_5Percent,
    .column_10Percent,
    .column_20Percent,
    .column_30Percent,
    .column_40Percent,
    .column_50Percent,
    .column_60Percent,
    .column_65Percent,
    .column_70Percent,
    .column_80Percent,
    .column_90Percent,
    .column_100Percent {
            width: 100%;
            float: left;
            margin-left: 0px;
            margin-right: 0px;
            padding-left: 0px;
            padding-right: 0px;
    }
    .alphabet li {
        float:left;
    }
}

JavaScript

$(function() {

    //this is just to make the columns work without respond.js
    $("#parent div").each(function() {
        $(this).css("width", "50%");
        var cl = $(this).attr("class");
        var width = cl.match("[0-9]+");
        $(this).css("width", width + "%");
        $(this).css("height", "100%");
    });
    //how to collapse expand
    $("#hide").click(function() {
        $("#groups").hide("slide");
        $("#list").css("width", "100%");
    });
    $("#show").click(function() {
        $("#groups").show("slide");
        $("#list").css("width", "70%");
    });

});