Masonry & jQuery content toggles (slideDown, show etc.)

Question

I'm building a blog where I want to only display the relevant images of each blog post in a nicely ordered grid using Masonry. When the user clicks on an image the blog text content will be revealed beneath the image (on the same page). For some reason the hidden content won't show up when I add the click function. I'm not that familiar with the on() event handler (required because of Masonry) and there might be something obvious that I'm missing. What happens is I see in the DOM that the elements get display: block, yet they don't show up.

The HTML -

<?php get_header(); ?>
        <div id="posts" class="clearfix">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <a class="view" href="#"><?php the_post_thumbnail(465, 999) ?></a>
                <div class="overlay">+</div>
                <article>
                    <a href="#" class="close">x</a>
                    <h1><?php the_title() ?></h1>
                    <hr>
                    <?php the_content() ?>
                    <span><?php the_date('Y/d/m') ?></span>
                </article>
            </div>
        <?php endwhile; endif;  ?>
        </div>
        <div class="navigation">
            <?php next_posts_link(); ?>
        </div>
<?php get_footer(); ?>

The JavasScript -

var $container = $('#posts');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 475,
            isAnimated: true
        });
    });

    $(document).on("click", "a.view", function(){
        if(!$(this).parent().find('article').is(':visible')){
            $(this).parent().find('article').slideDown(250);
        }
        else {
            $(this).parent().find('article').slideUp(250);
        }
        e.preventDefault();
    });

    $(document).on("mouseover", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250);
    });
    $(document).on("mouseout", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250);
    });

Answer 1

Your js code seems to be working fine but the only problem is that <article> tags get overlapped with other images shown below. You can apply this code to your + icon (when you hover any image) which will show the image details and push the below image down.

$('div#posts > div.post > a.view').each (function (i) {
    $(this).click(function () {
        var articleHeight = $(this).siblings('article').show().height();
        $('div#posts > div.post').each (function (j) {
            if (i%2 == 0 && j%2 == 0 && j > i) {
                var currentTop = parseInt($(this).css('top'));
                $(this).css({top : currentTop + articleHeight});
            } else if (i%2 != 0 && j%2 != 0 && j > i) {
                var currentTop = parseInt($(this).css('top'));
                $(this).css({top : currentTop + articleHeight});
            }
        });
    });
}); 

P.S. To see the above code working, Just run the code in console and click +.