Grid/Table toggle

Swap between a grid and table view via a click of a button. Mimics a table layout.

by Ryan Milliken

HTML

<div class="row"> 
    <a class="button-table" data-target="table"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Table"/></a>
        <a class="button-grid" data-target="grid"><img src="http://fakeimg.pl/100x50/282828/fff/?text=Grid"/></a>
</div>
<div class="content">
    <div class="grid">
        <div class="result three columns h-100">
            <div>Title</div>
            <div>Date</div>
            <div>Info</div>
        </div>
        <div class="result three columns h-100">
            <div class="grid-title">Class Title</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-details"><a href="">Link</a></div>
            <a class="grid-link" id="1" href="http://bing.com"></a>
        </div>
        <div class="result three columns h-100">
            <div class="grid-title">Class Title</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-details"><a href="">Link</a></div>
            <a class="grid-link" id="2" href="http://google.com"></a>
        </div>
        <div class="result three columns h-100">     
            <div class="grid-title">Class Title</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-details"><a href="">Link</a></div>
            <a class="grid-link" id="3" href="http://msn.com"></a>
        </div>
        <div class="result three columns h-100">
            <div class="grid-title"> Class Title</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-row">Item Details</div>
            <div class="grid-details"><a href="">Link</a></div>
            <a class="grid-link" id="4" href="http://yahoo.com"></a>
        </div>
    </div>
</div>

CSS

thead, div, a, p, span {
    box-sizing:border-box !important;
}
.hide{display:none;}
.columns, .column {
    float:left;
    position:relative;
}
.h-100 {
    min-height:110px;
}
.three {
    width:25%;
}
a:hover {
    cursor:pointer;
    background:#e9e9e9;
}
a.toggle-table, a.toggle-grid {
    position:relative;
    float:left;
    margin-right:6px;
    font-size:20px;
    padding:8px;
}
.settings, .link {
    display:none;
}
.grid {
    overflow:auto;
}
.grid .result {
    padding:2%;
    background:#e9e9e9;
    border:1px solid #333;
    overflow:hidden;
}
.grid .result:first-child {
    display:none;
}
.grid .result .title, .grid.result .row, .grid .result .link {
    position:relative;
    float:left;
    width:100%;
}
.grid .result .grid-title {
    border-bottom:1px solid blue;
    padding-bottom:2px;
    margin-bottom:2px;
    color:#282828;
    font-size:16px;
    font-weight:bold;
}
.grid .result .grid-row {
    color:#666;
    font-size:10px;
}
.grid .grid-link{position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; background:#fff; opacity:0 !important; filter:alpha(opacity=0) !important;}
.grid .grid-details{background:#282828; padding:4px; position:absolute; top:-55px; right:0;}
.grid .grid-details a{color:#fff;}

table .grid-link{display:none;}
thead {
    background:#333;
    color:#fff;
    text-align:left;
    font-size:12px;
}

JavaScript

$btnTable = ".button-table";
$btnGrid = ".button-grid";
$table = "table.toggle";
$grid = ".grid";
$link = ".grid-link";
$details = ".grid-details";
$result = ".result";

$(function () {
$(document).on('mouseover', $result, function() {
    $(this).find('.grid-details', this).stop().animate({'top':'0'},300);
});
$(document).on('mouseout', $result, function() {
    $(this).find('.grid-details', this).stop().animate({'top':'-55px'},300);
});
});


if ($($table).length > 0) {    
    $($btnTable).addClass('active');
} else {
    $($btnTable).removeClass('active');
}
if ($($grid).length > 0) {
    $($btnGrid).addClass('active');
} else {
    $($btnGrid).removeClass('active');
}
    
$($btnTable).click(function() {
    $(this).addClass('active');
    $($btnGrid).removeClass('active');
    $($grid).replaceWith(function() {
        var html = '';
        
        $('div:first', this).each(function() {
            html += '<thead>';
            $('div', this).each(function() {
                html += '<th>' + $(this).html() + '</th>';
            });
            html += '</thead>';
        });
        
        $('div:not(:first)', this).each(function() {
            var innerHtml = '';
            var innerLink = '';
            var innerLink2 = '';
            $($details, this).each(function () {
                innerLink2 += '<td class="hide grid-details">' + $(this).html() + '</td>';
            });
            $($link, this).each(function() {
                var href = $(this).attr('href');
                var id = $(this).attr('id');
                innerLink += '<td><a class="grid-link" href="'+ href +'" id="'+ id +'"></td>';    
            });
                       
            $('div', this).not($details).each(function() {
                innerHtml += '<td class="table-item">' + $(this).html() + '</td>';
            });
            if (innerHtml != '') {            
                html += '<tr>'+ innerHtml + innerLink2 + innerLink +'</tr>';
            }
      ...