Collapsing table cells in (mostly) CSS

by jrunning

HTML

<input type="checkbox">

<table><tbody>
    <tr id="collapse-me"><td>hello</td><td>world</td></tr>
    <tr><td>goodbye</td><td>blue monday</td></tr>
</tbody></table>

CSS

body { margin: 10px; }
td {
    -webkit-box-sizing: border-box;
    height: 40px;
    padding: 10px;
    border: 1px solid blue;
    overflow: hidden;
    -webkit-transition: height .5s;
}
.animating > td {
    padding: 0 10px;
}

.wrapper {
    -webkit-box-sizing: border-box;
    padding: 10px 0;
    -webkit-transition: margin .5s;
}

[aria-hidden=true] .wrapper {
    margin-top: -40px;
}

[aria-hidden=true] td {
    height: 0px;
    -webkit-transition: border-width  0s linear .5s,
                        border-color .4s        .1s;
    border-width: 0px;
    border-bottom-color: transparent;
}

CoffeeScript

unwrapInner = ($els)->
    $els.children('div.wrapper').replaceWith -> this.innerHTML
    $els

collapseRow = ($tr)->
    $tr = $($tr)
    $tr.addClass('animating').children('td').wrapInner('<div class="wrapper"/>')
    setTimeout ->
        $tr.attr('aria-hidden', true)
    , 50

expandRow = ($tr)->
    $tr = $($tr)
    
    $(document).one 'webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', $tr, ->
        unwrapInner $tr.removeClass('animating').children('td')
        
    $tr.attr('aria-hidden', false)
    
$(document).on 'change', 'input', (e)->
    if e.target.checked
        collapseRow $('#collapse-me')
    else
        expandRow $('#collapse-me')