CRM filter block

by kapantzak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="col-xs-12" style="margin-top:20px">

<div class="filter-block-wrapper">
    
        <div class="filter-block-tools-wrapper">
            <a href="#" class="filter-button-toggle filter-button filter-expanded" title="Αποκρύψτε τα φίλτρα">
                <span class="f-btn-text">Φίλτρα</span>
                <i class="fa fa-chevron-up"></i>
            </a>
            <a href="#" class="filter-button">
                <i class="fa fa-filter"></i>
                <span class="f-btn-text">Εφαρμογή φίλτρων</span>            
            </a>
            <a href="#" class="filter-button clean-filter-values">
                <i class="fa fa-eraser"></i>
                <span class="f-btn-text">Καθαρισμός φίλτρων</span>            
            </a>
        </div>
    
    <div class="filter-block-table-wrapper">
        <table class="browse-filter-table">
            <tbody>
                <tr>
                    <td>Επωνυμία</td>
                    <td><input type="text" name="name" value="value" /></td>
                    <td>Κύριο εσωτερικό τηλ</td>
                    <td><input type="text" name="name" value="value" /></td>
                    <td>ΑΜΚΑ</td>
                    <td><input type="text" name="name" value="value" /></td>
                </tr>
                <tr>
                    <td>ΑΦΜ</td>
                    <td><input type="text" name="name" value="value" /></td>
                    <td>Κύριο email</td>
                    <td><input type="text" name="name" value="value" /></td>
                    <td>ΑΜ ΙΚΑ</td>
                    <td><input type="text" name="name" value="value" /></td>
                </tr>
                <tr>
                   ...

CSS

/* Helper rules (delete if not necessary) */
.hidden {display:none}
a:visited,
a:active,
a:focus,
a:hover 
{
    text-decoration: none;
    color: #3498db;
}

div.filter-block-tools-wrapper {
    width: 100%;
    float: left;
    position: relative;
    z-index: 20;
    margin-bottom: -1px;
}

.filter-block-tools-wrapper > a.filter-button:not(:first-child) {
    margin-left: -1px;
} 

.filter-button {   
    height: 43px;
    float: left;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    background-color: #f1f1f1;
    color: #3498db;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    transition: all 150ms ease-out;
}

.filter-button.filter-expanded {
    margin-bottom: -1px;
    border-bottom: none;
}

.filter-button:not(.filter-expanded):hover {    
    background-color: #3498db;
    color: #fff;
}

.filter-block-table-wrapper {
    width: 100%;
    float: left;
    background-color: #f1f1f1;
    border-top: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;    
}

.browse-filter-table {
    width: 100%;
    float: left;    
}

.browse-filter-table td {
    padding: 10px;
}

div.filter-block-footer {
    width: 100%;
    float: left;
    padding: 10px;
}

#filter-block-open-label {
    padding-left: 5px;
}

JavaScript

// Clear filter values
$(document).on('click', 'a.clean-filter-values', function(e) {
    e.preventDefault();
    $(this).closest('div.filter-block-wrapper').find('input').attr('value', '');
})

// Check for user preferances (cookies)
var checkFilterState = function(userVars) {
    var a = $('a.filter-button-toggle');
    var icon = a.find('i.fa');
    var tableWrapper = $('div.filter-block-table-wrapper');
    
    if ((userVars) && (userVars == 'filter-collapsed')) {
        a.removeClass('filter-expanded').addClass('filter-collapsed').attr('title','Εμφανίστε τα φίλτρα');
        icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
        tableWrapper.hide();
        $('a').not('.filter-button-toggle').hide();
    }
}

checkFilterState('filter-collapsed');

// Show / hide filter
$(document).on('click', 'a.filter-button-toggle', function() {
    var that = $(this);
    var thisIcon = that.find('i.fa');
    var tableWrapper = $('div.filter-block-table-wrapper');
    
    if (that.hasClass('filter-expanded')) {
        that.toggleClass('filter-expanded filter-collapsed').attr('title','Εμφανίστε τα φίλτρα');
        thisIcon.toggleClass('fa-chevron-up fa-chevron-down');
        tableWrapper.hide();
        $('a').not('.filter-button-toggle').hide();
    } else {
        that.toggleClass('filter-expanded filter-collapsed').attr('title','Αποκρύψτε τα φίλτρα');
        thisIcon.toggleClass('fa-chevron-up fa-chevron-down');
        tableWrapper.show();
        $('a').not('.filter-button-toggle').show();
    }
});