Max-height Accordion

Still a bit wobbly at the bottom.

by Wray Bowling

HTML

<div class="expandables">
    <div class="expanded">
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
    <div>
        <p>Example.<br>blah<br>blah<br>blah.</p>
    </div>
</div>

CSS

p{
    margin:0;
}

.expandables > div {
    margin:1px;
    padding-left:0.5em;
    position:relative;
    overflow:hidden;
    max-height:1.2em;
}

.expandables > div,
.expandables > div:hover{
    -webkit-transition: max-height 2s linear;
}

.expandables .expanded {
    max-height:4.5em;
}

JavaScript

$('.expandables').on('mouseover', 'div', function(){
        $('.expandables > div').removeClass('expanded');
        $(this).addClass('expanded');
    }
);

$('.expandables > div').each(function(){
    $(this).css('background-color',ranHex());
});

function ranHex(){
	return '#'+Math.floor(Math.random()*16777215).toString(16);
}