Insert Row after divs

by Austin Crane

HTML

<div class="wrapblock">1</div>
<div class="wrapblock">2</div>
<div class="wrapblock">3</div>
<div class="wrapblock">4</div>
<div class="wrapblock">5</div>
<div class="wrapblock">6</div>
<div class="wrapblock">7</div>
<div class="wrapblock">8</div>
<div class="wrapblock">9</div>
<div id="content">Some Content</div>

CSS

.wrapblock
{
    background: #963a3a;
    display: inline-block;
    width: 22px;
    height: 22px;
    color: white;
    font-size: 24px;
    text-align: center;
    padding: 40px;
    margin: 10px;
    vertical-align:top;
}

#content
{
    display:none;
    vertical-align:top;
    width:100%;
    background: #5582c1;
    font-size: 24px;
    color: white;
    padding: 10px;
}

JavaScript

function placeAfter($block) {
    $block.after($('#content'));
}

var $chosen = null;

$(window).on('resize', function() {
    if ($chosen != null) {
        $('#content').css('display','none');
        $('body').append($('#content'));
        $chosen.trigger('click');   
    }
});

$('.wrapblock').on('click', function() {
    $chosen = $(this);
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i, j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});