JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<header>
    <div class="logo">
        <img class="logo" src="images/logo2.png">
    </div>
</header>
<section id="work">
    <section id="filters">
        <a href="#">Web Design and Mobile Applications</a>
        <a href="#">Service Design and Digital Branding</a>
        <a href="#">Physical Computing</a>
        <a href="#">Responsive Environments</a>
        <a href="#">Data Visualisation</a>
        <a href="#">Interactive Storytelling</a>
    </section>
    <ul>
        <li id="1" data-category="3" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="2" data-category="3" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
        <li id="3" data-category="3" class="content">
            <a href="#"><img src="images/work/3.jpg"></a>
        </li>
        <li id="4" class="content">
            <a href="#"><img src="images/work/4.jpg"></a>
        </li>
        <li id="5" class="content">
            <a href="#"><img src="images/work/5.jpg"></a>
        </li>
        <li id="6" class="content">
            <a href="#"><img src="images/work/6.jpg"></a>
        </li>
        <li id="7" class="content">
            <a href="#"><img src="images/work/1.jpg"></a>
        </li>
        <li id="8" class="content">
            <a href="#"><img src="images/work/8.jpg"></a>
        </li>
        <li id="9" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="10" class="content">
            <a href="#"><img src="images/work/9.jpg"></a>
        </li>
        <li id="11" class="content">
            <a href="#"><img src="images/work/7.jpg"></a>
        </li>
        <li id="12" class="content">
            <a href="#"><img src="images/work/2.jpg"></a>
        </li>
    </ul>
</section>

CSS

.filters {
    position: relative;
    margin-top: -10px;
    animation-name: slide-down;
    animation-duration: 1s;
    -moz-animation-name: slide-down;
    -moz-animation-duration: 1s;
    -webkit-animation-name: slide-down;
    -webkit-animation-duration: 1s;
}
@keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-moz-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}
@-webkit-keyframes slide-down {
    from {
        margin-top: -70px;
    }
    to {
        margin-top: -10px;
    }
}

JavaScript

/*jslint maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    var filters = document.getElementById("filters"),
        anchors = filters.getElementsByTagName("a");

    function ani() {
        document.getElementById("filters").className = "filters";
    }

    filters.addEventListener("click", ani, false);

    function toggleVisibility(selectedTab) {
        var content = document.getElementsByClassName("content"),
            length = content.length,
            i;

        for (i = 0; i < length; i += 1) {
            if (content[i].dataset.category === selectedTab) {
                content[i].style.display = "inline";
            } else {
                content[i].style.display = "none";
            }
        }

    }

    anchors[0].addEventListener("click", function () {
        toggleVisibility("3");
    }, false);

}());