JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="category-filter">
    <a href="#" data-target="fitness-nutrition">Fitness &amp; Nutrition <i class="fa fa-check"></i></a>
    <a href="#" data-target="food-drink">Food &amp; Drink <i class="fa fa-check"></i></a>
    <a href="#" data-target="environment-ecology">Environment / Ecology <i class="fa fa-check"></i></a>
    <a href="#" data-target="society-culture">Society &amp; Culture <i class="fa fa-check"></i></a>
    <a href="#" data-target="technology">Technology <i class="fa fa-check"></i></a>
</div>

<input type="text" class="textbox" />

<ul class="episodes">
    <li data-category="fitness-nutrition">Episode Box - Fitness &amp; Nutrition</li>
    <li data-category="food-drink">Episode Box - Food &amp; Drink</li>
    <li data-category="environment-ecology">Episode Box - Environment / Ecology</li>
    <li data-category="society-culture">Episode Box - Society &amp; Culture</li>
    <li data-category="technology">Episode Box - Technology</li>
    <li data-category="fitness-nutrition">Episode Box - Fitness &amp; Nutrition</li>
    <li data-category="technology">Episode Box - Technology</li>
    <li data-category="food-drink">Episode Box - Food &amp; Drink</li>
    <li data-category="society-culture">Episode Box - Society &amp; Culture</li>
    <li data-category="fitness-nutrition">Episode Box - Fitness &amp; Nutrition</li>
    <li data-category="food-drink">Episode Box - Food &amp; Drink</li>
</ul>

CSS

body {
    padding: 1em;
    background-color: #ebeff0;
}

.test { color: red; }

#category-filter {
    max-width: 270px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 2em;
}

#category-filter a {
    border-bottom: 1px solid #eee;
    display: block;
    color: #555;
    padding: 0.6em 0.8em;
}

#category-filter a:last-child {
    border-bottom: 0;
}

#category-filter a:focus,
#category-filter a:active,
#category-filter a:hover {
    text-decoration: none;
    color: #555;
}

#category-filter a:hover {
    background-color: #f9f9f9;
}

#category-filter .fa-check {
    color: #efefef;
    float: right;
    margin-top: 3px;
    transition: color 0.1s ease-in-out;
}

#category-filter a.active { background-color: #f9f9f9; }

#category-filter a.active .fa-check {
    display: block;
    color: #5f9953;
    transition: color 0.1s ease-in-out;
}

JavaScript

var categories = [];

$("#category-filter a").click(function() {
    var selected = $(this).data("target");
    
    $(this).toggleClass("active");
    
    if ( $(this).hasClass("active") ) {
        categories.push(selected);
    }
    
    $(".textbox").val(categories);
});