JSFiddle - React, Tailwind, and code Playground

by jannis

HTML

<link rel="stylesheet" href="http://timobontenbal.net/downloadbutton/style/the-tooltip.css">
<link rel="stylesheet" href="http://timobontenbal.net/downloadbutton/style/style.css">
<script src="http://timobontenbal.net/downloadbutton/js/the-tooltip.js"></script>
<script src="http://timobontenbal.net/downloadbutton/js/selectivizr-min.js"></script>

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Company Name</title>
        <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link href='http://fonts.googleapis.com/css?family=Esteban' rel='stylesheet' type='text/css'>
        
        <link rel="stylesheet" href="the-tooltip.css" />
        <script src="the-tooltip.js"></script>
        <!--[if (gte IE 6)&(lte IE 8)]>
        <script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.4-min.js"></script>
        <script src="selectivizr-min.js"></script>
        <![endif]-->
        
    </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    <h1>COMPANY NAME</h1>
                    <ul id="filterlist">
                        <li class="zip"><a data-type="zip" class="tag" href="#"></a></li>
                        <li class="jpg"><a data-type="jpg" class="tag" href="#"></a></li>
                        <li class="pdf"><a data-type="pdf" class="tag" href="#"></a></li>
                    </ul>
                    <div class="downloadDiv" data-type="zip">
                        <div class="downloadbutton"><a href="#"></a></div>
                        <p class="filename">Free Medical Icons</p>
                        <p class="filesize">0.22mb / File size<a class="filter" href="#"><span id="zipfile" class="filetype"></span></a></p>
                    </div>
                    
                    <div class="downloadDiv" data-type="jpg">
                        <div...

JavaScript

$(function() {
    // dom is ready now.
    
    var wrapper = $('#content'),
        tags = $('a.tag[data-type]','#filterlist'),
        items = $('.downloadDiv');
    
    wrapper.on('filter', function(e, type) {
        // custom event listener which expects a type to be passed into this event.

        // cached shortcut to wrapper
        var container = $(this),
            // shortcut to data object of container.
            data = container.data(),
            // closure, if type is not given then reset the list (same as trying to filter by the already active type)
            type = type || false;
        
        // if the data object does not yet exist (first click) create it.
        if ( typeof data.filter === "undefined" )
        {
            // create the data.filter reference.
            data.filter = '';
        }
        
        // check if this is a filter call or we're showing all items again.
        if ( !!type && type !== data.filter )
        {
            // filter action…
            // store the new active filter
            data.filter = type;
            
            // create empty arrays to store the filter results.
            var toShow = [], toHide = []; 
            
            // go through all containers and if the type does not match our clicked type hide them
            $.each( items , function(i, element) {
                
                var elementType = $(element).data().type;
                
                // check if our filter type matches the element's type or not.
                if ( elementType !== type )
                {
                    // this element is not of the kind we want, add it to the 'to hide' array.
                    toHide.push(element);
                }
                else
                {
                    // we have a winner, add it to the show array.
                    toShow.push(element);
                }
                
            });

            // filter!
           ...