How to replace preview of post with full content using jQuery / Javascript?

In a php variable $preview I save about 4 lines of a post without any tags. In the $full I save full of the post with tags.

This is what I used to have, an expand/collapse toogle http://fiddle.jshell.net/r4F8Q/22/ when I was saving the entire post. But it doesn't look good without tags so I need to go one step forw开发者_运维问答ard.

My question is how to change it, so it shows $preview until the user clicks on expand and show the $full post?

Thank you

Here is my version: http://fiddle.jshell.net/r4F8Q/28/

I've used separate blocks for preview and full content and fadeIn\fadeOut for animating it

Put two elements in the output HTML of your PHP script; one containing the preview and one containing the full text. Then just hide the full one (CSS "display: none;") and on a click show the element containing the full text while hiding the element containing just the preview?

If you modify the html a little you could save the preview in a div and the full message in another and then toggle the dive like this:

<div id="post">

    <div id="image">
        <img alt="image" border="0" src="here-goes-an-image.png">
    </div>

    <div id="text expanded">
        <a href="#" class="toggle">(expand)</a>
        <h2><a href="#" target="_blank">This is the title</a></h2>
        <div id="authorANDtime">
            <b>from <a href="#">author</a>, 22 mins ago.</b>
        </div>
                <div id='preview'>Here goes the preview vHere goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview </div>  
        <div id="thepost">
            Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post.
            HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT.
        </div>

    </div>

</div>

$('#thepost').hide();
$('.toggle').click(function(){

    $('#preview').toggle();
    $('#thepost').toggle();
    if($('#preview').is(':visible')){
        $(this).text('(expand)');
    }else{
        $(this).text('(collapse)');
    }
});

http://fiddle.jshell.net/r4F8Q/27/