Rehab: Accordion test

by stopsatgreen

HTML

<ul>
    <li class="hello">
        <div class="kitten">
            <img src="//placekitten.com/400/300"/>
        </div>
        <div class="toast">
            <h2>I am king toast</h2>
            <p>Focusing on needs means we can concentrate on the things that deliver most value for money.</p>
        </div>
    </li>
    <li class="hello">
        <div class="kitten">
            <img src="//placekitten.com/g/400/300"/>
        </div>
        <div class="toast">
            <h2>I am queen toast</h2>
            <p>Focusing on needs means we can concentrate on the things that deliver most value for money.</p>
        </div>
    </li>
    <li class="hello">
        <div class="kitten">
            <img src="//placekitten.com/400/300"/>
        </div>
        <div class="toast">
            <h2>I am queen toast</h2>
            <p>Focusing on needs means we can concentrate on the things that deliver most value for money.</p>
        </div>
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
}
.hello {
    background-color: yellow;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 400px;
}
.hello:nth-child(even) { background-color: lime; }
.kitten {
    display: block;
    left: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
    position: absolute;
    top: 10px;
    width: 80px;
}
.kitten img {
    height: auto;
    width: 100%;
}
.toast {
    float: right;
    width: 300px;
}
.kitten {
    -webkit-transition: 0s 150ms;
    transition: 0s 150ms;    
}
.toast {
    -webkit-transition: padding-top 150ms, width 150ms 150ms;
    transition: padding-top 150ms, width 150ms 150ms;
}
.toast h2, .toast p { margin: 0; }
/* */
.nasty .kitten, .nasty .toast { width: 400px; }
.nasty .kitten { margin-right: 0; }
.nasty .toast { padding-top: 310px; }
.nasty .loading::after {
    background: url('http://broken-links.com/tests/images/spiffygif_30x30.gif') no-repeat;
    content: '';
    display: block;
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    top: 50%;
    width: 30px;
}

JavaScript

$('.toast h2').click(function(e) {

    var thePars = $(e.currentTarget).parents('.hello')
    $(thePars).siblings().removeClass('nasty').find('.loading').removeClass('loading');
    $(thePars).toggleClass('nasty');

$('.nasty .kitten').one('transitionend webkitTransitionEnd', function _func(e) {
    $(e.currentTarget).addClass('loading');
});
    
});