jQuery slideDown for posts on index page? (Wordpress)

Question

I'm doing a one page website in wordpress and there I want to display only one post on the index page with a summary of the post. For that I know I can change the_content to the_excerpt in the loop.php. But when I click on "Continue Reading" I come to a new page and that is not what I want. I want the div to slide down and display the whole news on the page.

Is there a way to do that?

Thanks in advance

Answer 1

Easy solution ( not the best ) :

Display the_excerpt() in a visible div , display the_content() in a hidden div , on "continue reading" click ( using jquery ) togle animation .

Answer 2

I would output both the excerpt and the content, each to its own div tag. Class them accordingly, and hide the content div.content in your CSS file. Now, put a read more link after these two div's and then link a handler to the read more where you hide the excerpt div.excerpt and show the content div.content in one motion:

$("a.readmore").click(function () {
    $(this).prev().prev("div.excerpt").hide();
    $(this).prev("div.content").show();
    // EDIT:
    return false; // this will stop default behaviour of jumping to the top of page for instance
}

Hope this puts you on the right path. Here my solution: http://jsfiddle.net/FANVp/6/. Like poelinca says, not the best but it'll work.