Question

Hello I have a jQuery example that a thepost-preview div is replaced with the full post. Because I am having some troubles with PHP, instead of replacing the two div, I need the full post to be added right after the post-preview.

In this case, the thepost div content will have the reamining characters of the post.

This is because I am having some issues with substr and strip_tags in PHP.

So my Fiddle is here http://fiddle.jshell.net/r4F8Q/34/ any help is appreciated.

Answer 1

You can put the content on the page and use Html tags to define its structure (e.g. span, p, or div). Then find the pieces using jquery and use jQuery.html() to move the pieces around.

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

var html = expanding
        ? $content.html()
        : $content.find('.intro').html();
    $display.html(html);

Or, you can just use jquery to control the visibility of the additional content.

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

   $('.toggle').click(function(e) { 
    var $this = $(this);
    var $content = $this.siblings('.post-content').find('.additional');
    var expanding = ($this.text() == '(expand)');
    var html = expanding
        ? $content.show()
        : $content.hide();
    $this.text(expanding ? '(collapse)' : '(expand)') 
    e.preventDefault();
});

Or, if you really can’t get your PHP to structure your content, you can stuff the intro into jQuery.data() and pull the content out of there when collapsing.

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

    $('.post-display').each(function() {
    var $this = $(this);
    $this.data('intro', $this.html());
});