Recently I was working on a site where I wanted to show a page of post excerpts and be able to toggle some of them to show the full post.  Initially I was using a simple toggle script and I ran into two problems: The first was that, with multiple posts on the page, clicking the toggle in any post flipped the two divs in all posts; the second was that, with the masonry layout set, the new div content overlapped the post below.

I realised that to solve the first problem I had to find a way to use the post id in the div classes. It took a while to find the solution. The trick is to set a data variable in the html that can then be used in the javascript.

The second problem is a bit easier. The masonry layout just has to be reset after the toggle.

The script call I used looks like this:

<script type="text/javascript">
$(document).ready(function() {
 $('a.info').click(function() {
 $('.id' + $(this).data('id')).toggle();
 $(this).text( ($(this).text()=='More +') ? 'Less -' : 'More +' );
 $('.grid').masonry('layout' );
 })
}); 
</script>

And the html:

<div class="id<?php the_ID(); ?>">
<?php the_excerpt(); ?>
</div>

<div class="id<?php the_ID(); ?>" style="display:none">
<?php the_content(); ?>
</div>

<a class="info" data-id="<?php the_ID(); ?>" href="javascript:void(0)">More +</a>

The final result can be seen here: tolmencentre.co.uk although the feature may not always be in use – look for the More + button