Question

Seem more..issue (Operation slows down after clicking see more 5-10 times)

Ive modified See More.. technique based on code over here http://jsfiddle.net/hgxbf/
The issue what im facing is after clicking of See More/See Less 5-10 times the operation becomes really slow and does not expand/collapse properly.

       <div class="seeMore" />  

is dynamically added by the script

HTML Structure.

<div class="Blk">
    <div class="Title">
        Donec at elit sed metus placerat placerat congue ut purus
    </div>
    <p class="trunc">
                                    Proin ipsum lectus, facilisis sed ornare eget, egestas vel mi. Nullam ac odio arcu. Nunc congue, urna vitae malesuada consequat, leo erat bibendum nunc, et fringilla nibh diam ac tellus. Sed quis ante a ipsum placerat fermentum. Aliquam erat volutpat. Praesent rutrum ornare lectus tincidunt suscipit.
    </p>
    <div class="seeMore">
        <span>SEE MORE</span>
    </div>                          
</div>

My Code http://jsfiddle.net/y4GXL/1/

Any help really appriciated!

Answer 1

I had some spare time, so I’ve fixed it up for you.

Basically you have to keep one reference to the “see more / see less” element and keep a state variable. Inside the click handler you decide to take action depending on the state; collapse or expand. After every state change, you update the “button” text and state.

I’ve also applied more convenient variable naming (all jquery elements are prefixed with a dollar) and made the top function return the result of .each; otherwise the jQuery chain is broken.

(function($) {
    $.fn.truncateText = function(maxWords) {
        return this.each(function() {
            var $el = $(this),
            origText = $el.text(),
            truncText = origText.split(' '),
            state,
            $toggleButton;

            // decide whether to place a button    
            if (truncText.length <= maxWords) {
                return;
            }

            truncText.length = maxWords;
            truncText = truncText.join(' ');

            // add button and define click handler    
            $toggleButton = $('<div class="seeMore"></div>')
                .insertAfter($el)
                .on('click', function() {
                    if ('open' == state) {
                        collapse(); // old state was open, so close it
                    } else {
                        expand(); // old state was closed, so open it
                    }
                });

            function collapse()
            {
                $el.text(truncText + ' ...');
                state = 'closed';
                $toggleButton.text('See More');
            }

            function expand()
            {
                $el.text(origText);
                state = 'open';
                $toggleButton.text('See Less');
            }

            collapse();
        });
    }
})(jQuery);
$(".trunc").truncateText(4);​

---

In action here: http://jsfiddle.net/y4GXL/6/