JSFiddle - React, Tailwind, and code Playground

by Oleg Serebryakov

HTML

<div class="menu">
    Выбираем:
    <button class="btn" data-type="design">Дизайн</button>
    <button class="btn" data-type="html">Верстку</button>
    <button class="btn" data-type="php">Программирование</button>
    <button class="btn" data-type="all">Всё</button>
    <button class="btn" data-type="none">Ничего</button>
</div>

<div class="portfolio">
    <div class="item type_design">Дизайн 01</div>
    <div class="item type_design">Дизайн 02</div>
    <div class="item type_design">Дизайн 03</div>
    <div class="item type_html">Верстка 01</div>
    <div class="item type_html">Векстка 02</div>
    <div class="item type_html">Верстка 03</div>
    <div class="item type_php">Программирование 01</div>
    <div class="item type_php">Программирование 02</div>
    <div class="item type_design type_html">Дизайн + Верстка 01</div>
    <div class="item type_design type_html">Дизайн + Верстка 02</div>
</div>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.menu {
    position: relative;
    padding: 10px;
}

.portfolio {
    position: relative;
    padding: 10px;
    border-top: 4px solid #ccc;
}

.item {
    position: relative;
    width: 150px; height: 50px;
    padding: 10px;
    border: 4px solid #999;
    margin: 0 10px 10px 0;
    float: left;
}

JavaScript

var $buttons = $(".btn"),
    $items = $(".item"),
    type;

$buttons.on("click", function () {
    type = $(this).data("type");
    selectItems();
});

var selectItems = function () {
    switch (type) {
        case "all":
            $items.show();
            break;
        case "none":
            $items.hide();
            break;
        default:
            $items.hide();
            $items.filter(".type_" + type).show();
            break;
    }
};