JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentPage">
<article class="onePost" data-href="/pgae1.html">content here</article>
<article class="onePost" data-href="/pgae2.html">content here</article>
<article class="onePost" data-href="/pgae3.html">content here</article>
<article class="onePost" data-href="/pgae4.html">content here</article>
<article class="onePost" data-href="/pgae5.html">content here</article>
<article class="onePost" data-href="/pgae6.html">content here</article>
</div>

CSS

#contentPage{
    width:600px;
    margin:auto
}

.iframey{
    width:100%
}

.onePost{
    width:195px;
    height:200px;
    float:left;
    margin:2px;
    background:gray;
    cursor:pointer
}

.smaller{
    height:100px
}

.hidden{
    display:none
}

JavaScript

(function() {

var frcode = '<iframe class="iframey hidden" scrolling="no"></iframe>';
$('.onePost:nth-child(3n)').after(frcode);
$('.onePost:first').before(frcode);


$(".onePost").live("click", function() {

    $(".onePost").removeClass('smaller');

    $("iframe")
        .addClass('hidden')
        .removeAttr('src')
        .removeAttr('date-current');
                    
    $(this).nextAll("iframe:eq(0)")
        .removeClass('hidden')
        .removeAttr('style')
        .attr({src: $(this).data('href')})
        .attr('date-current', 'here');
});



$('#contentPage').on('DOMSubtreeModified', function(){
if($(".iframey[date-current]").length){
$(".iframey:not(.hidden)").prevUntil(".iframey").addClass('smaller');
}});

})();