0

I have a dynamic page that loads user content from a database. If the user's post is greater than 50 characters, I echo this code: $data['string'] = substr($data['string'], 49, 50).$showmore where $showmore = '<a href="#" class="showmore">Show More</a> Everything works up to this point, I just don't know how to change the substr values with jQuery when the "Show More" link is clicked. I will update this if additional info is needed.

  • You mean something like this ? http://demos.julienrenaux.fr/#/demos/jquery/load-more-widget-using-php-ajax-and-jquery – Bala Dec 17 '13 at 15:14
  • 1
    You will never be able to edit those values using jQuery. this is PHP code, which renders the page BEFORE it is loaded. jQuery can only alter the pages AFTER it is loaded. You can indeed make another AJAX request to the server to get the full information. Or you can just have PHP write all the characters, and cut them off using jQuery. Onclick you can 'uncut' them again. You can also insert the entire values in the HTML `title` element, and just hover your mouse over said element. – Viridis Dec 17 '13 at 15:15
  • @Bala.C not exactly, but it's close. The articles that appear when you hit "More" end with "..." but I'm looking for a "Show More" option to show the rest of that specific post. –  Dec 17 '13 at 15:20

2 Answers2

3

If you output all the text from PHP, you can use this Fiddle to make things interesting.

Fiddle: http://jsfiddle.net/iambriansreed/bjdSF/

jQuery(function(){

    var minimized_elements = $('p.minimize');

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < 100) return;

        $(this).html(
            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});

source

Community
  • 1
  • 1
alizahid
  • 959
  • 6
  • 17
0

Use the JQuery Shorten Plugin it is easy to implement and here is it's demo. The download zip contains samples as well.

Hope it helps

Bala
  • 3,576
  • 10
  • 46
  • 74