Loading external post/content to a specific div (jquery, wordpress)

Question

Hi, I've been playing around with the grid-a-licious theme, and found some really cool sites similar to the theme: ex. http://home.visuaal.com/

The question is: any idea on how the post contents were loaded similar to the sample above?

When the user clicks on each box, the specific div expands and displays/loads the entire post. When the close button is clicked, the box returns to its normal state.

I've been figuring out how to grab the content from the post's permalink and place it in the box. I've also searched/experimented through a lot of jquery scripts but no success to make them work with wordpress

Thank you

Answer 1

If you know the div that you want to load data into you can use the load function. To show and hide the div you can use one of the various Effects functions.

For example:

$("#your_div").load('/post_url', function() { 
  $(this).slideDown().click(function() { 
    $(this).slideUp();  // hide on any click - you can change the selector to suit your needs.
  });
});