JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-12" id="header">
        <div class="row">
            <div class="col-xs-2">
                <i class="fa fa-bars toogle-navpanel visible-xs-inline-block"></i>                
            </div>
            <div id="logo" class="col-xs-6">
                <span>Joromo.de</span>
            </div>
            <div class="col-xs-2">
                <i id="show-filters" class="fa fa-search toogle-search visible-xs-inline-block"></i>
            </div>
            <div class="col-xs-2">
                <i id="show-filters" class="fa fa-filter toogle-filterpanel visible-xs-inline-block"></i>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6" id="filter">
        <div id="filter-panel-head">
            
            <i class="fa fa-times toogle-filterpanel visible-xs-inline-block"></i>
        </div>
        <div class="widget"> <span class="name">Sale</span>

            <div class="container">
                <label for="checkbox1">Check me out</label>
                <input id="checkbox1" type="checkbox" />
            </div>
        </div>
        <div class="widget"> <span class="name">Versandkostenfrei</span>

            <div class="container">
                <label for="checkbox2">Check me out</label>
                <input id="checkbox2" type="checkbox" />
            </div>
        </div>
        <div class="widget"> <span class="name">Gutschein</span>

            <div class="container">
                <label for="checkbox3">Check me out</label>
                <input id="checkbox3" type="checkbox" />
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6" id="content">Content Content Content Content Content Content Content Content Content...

CSS

* {
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
html, body {
    padding:0;
    margin:0;
}
body { overflow-x: hidden;}
i.fa {
    cursor:pointer;
}
.widget {
    margin:10px 0;
}
.widget .name {
    font-size:2em;
    font-weight:bold;
    border-bottom:1px solid;
}
#header i {
    padding:10px;
}
#logo span {
    display:block;
    text-align:center;
    line-height:34px;
}
#content {
    background:red;
}
@media screen and (max-width: 767px) {
    #filter {
        display:none;
        position:absolute;
        background:grey;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:9999;
    }
    .widget .container {
        display:none;
    }
}
@media screen and (min-width: 768px) {
    #filter, .widget .container {
        display:block !important;
    }
}

JavaScript

$(document)
    .on("click", ".widget .name", function () {
    $(this).next(".container").toggle();
})
    .on("click", ".toogle-filterpanel", function () {
    $("#filter").toggle();
})