多段，只有一个“更多阅读”按钮显示全部

Question

This piece of code loops through all paragraphs and adds a see more button at their end. I want it to show just the first few words of the first paragraph and, if you click on "see more", to show all paragraphs. I tried removing the each loop, tried to wrap it into a div and get it with .html() and then cut it but with no avail. I would appreciate an idea to point me in the right direction.

Update: maybe I wasn't clear enough: just one see more button at the end of first ten characters of the first paragraph. If you click on that it shows the full content of all paragraphs.

Please, no plugins.

 jQuery(function(){ var minimized_elements = $('p'); 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(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> 

Answer 1

I have made some changes in your code. May be this is what you want:

 jQuery(function(){ var minimized_elements = $('p'); var counter = 1; minimized_elements.each(function(){ if(counter==1){ $(this).addClass("first"); var t = $(this).text(); if(t.length < 100) return; $(this).html( t.slice(0,100)+'<span>... </span><a href="#" class="more">Show</a>'+ '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Hide</a></span>' ); } else{ $(this).hide(); } counter++; }); $('a.more', minimized_elements).click(function(event){ event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); $('p').show(); }); $('a.less', minimized_elements).click(function(event){ event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); $('p').not('.first').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p> 

Answer 2

Your code run, but i tried to figure out your problem so, I edit yours to

jQuery(function(){

    var minimized_elements = $('p');


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

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

        $(this).find('a').click(function() {
            if ( $(this).is('.more') ) {
                $(sefl).find('.hidden').show();
                $(sefl).find('.more').hide();
            } else if ( $(this).is('.less') ) {
                $(sefl).find('.hidden').hide();
                $(sefl).find('.more').show();
            }
        });

    }); 


});

Demo