enlarge the div and show hidden text

by Berat Emre Nebioğlu

HTML

<div>
    <div><span id="addText">click to add extra content to this column </span></div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS

body > div {
    display: table;
    width: 100%;
}
div > div {
    display: table-cell;
    width: 25%;
}
div > div:nth-child(odd) { background: lightblue; }
div > div:nth-child(even) { background: lightgreen; }

JavaScript

$("#addText").on( "click", function () {
    $("div > div:first-child").append( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elit purus, luctus vel volutpat quis, feugiat sit amet est. Vestibulum ullamcorper blandit sapien, vel viverra magna auctor at. In diam est, blandit posuere metus non, placerat interdum lectus. Nulla vel blandit nunc. Maecenas eget vestibulum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel ante eros. Cras pellentesque magna nec hendrerit venenatis. ");
});