Toggle Excerpt and Content

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:

And the html:

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