Using CSS class to hide elements instead of show() and hide()

This technique is based on Twitter Bootstrap approach. It consists of using .addClass('hidden') instead of .hide() in jQuery. Unfortunately this approach can't be used for .slideDown(), slideUp(), fadeOut() and fadeIn() methods.

by bfaria

HTML

<div id="element1" class="element">
    <div class="table-row">
        <div class="table-cell">Some content</div>
    </div>
</div>
<div id="element2" class="element">
    <div class="table-row">
        <div class="table-cell">Some content</div>
    </div>
</div>
<div id="element3" class="element">
    <div class="table-row">
        <div class="table-cell">Some content</div>
    </div>
</div>
<div id="element4" class="element">
    <div class="table-row">
        <div class="table-cell">Some content</div>
    </div>
</div>

CSS

.element {
    border: 1px solid #000;
    background-color: #DDD;
    margin: 5px 0;
}

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    border: 1px solid #F00;
    background-color: #FFF;
    display: table-cell;
    padding: 5px;
}

.hidden {
    display: none;
    visibility: hidden;
}

JavaScript

$('#element1').addClass('hidden').addClass('table').removeClass('hidden');
$('#element2').hide().addClass('table').show();
$('#element3').fadeOut('slow', function() {
    $(this).addClass('table').fadeIn('slow');
});
$('#element4').slideUp('slow', function() {
    $(this).addClass('table').slideDown('slow');
});