7839

<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>

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;
    }
};