I'm trying to get a 'See More' (expand) and 'See Less' (collapse) javascript code working. I will loop through and call this javascript code on each class instance in the HTML.

This actually works for the first time it appears on the page. I put in Console.logs to see that it works correctly. i.e. each time I click 'See More' the console will print 'Expand/Collapse' once.

However, each additional instance of the device (on another piece of text on the page), it won't expand at all.

What happens is that in the second instance, the console prints - Expand, Collapse. So it actually does both instantaneously (which means it doesn't expand at all).

In the third, it prints - Expand, Collapse, Expand, Collapse, Expand, Collapse. Almost like exponential growth... Any ideas?

function showMoreLess(element) {

var showChar = 150;

var ellipsestext = ...;

var moretext = See More;

var lesstext = See Less;

var content = $(element).html();

if (content.length > showChar) {

    var show_content = content.substr(0, showChar);

    var hide_content = content.substr(showChar, content.length - showChar);

    var html = show_content 

                + '<span class=moreelipses>' 

                + ellipsestext

                + '</span><span class=remaining-content><span>' 

                + hide_content + '</span>&nbsp;&nbsp;<a href= class=morelink>' 

                + moretext 

                + '</a></span>';

    $(element).html(html);

}



$(.morelink).click(function () {

    if ($(this).hasClass(less)) {

        $(this).removeClass(less);

        $(this).html(See More);

        console.log(Collapse) // Collapse appears in console

    } else {

        $(this).addClass(less);

        $(this).html(See Less);

        console.log(Expand) // Expand appears in console

    }

    $(this).parent().prev().toggle();

    $(this).prev().toggle();



    return false;

});

}

This is the JQuery code that loops through each class:

$(function () {

    $.each($(.limitedTextSpace), function(index, value) {

        showMoreLess(value);

    });

});

EDIT:

I followed Roberto Linares' format and recreated the function like so:

function showMoreLess(element) {

var showChar = 150;

var ellipsestext = ...;

var moretext = See More;

var lesstext = See Less;

var content = $(element).html();

if (content.length > showChar) {

    var show_content = content.substr(0, showChar);

    var hide_content = content.substr(showChar, content.length - showChar);

    var html = '<span class=collapsed>' + show_content 

                + ellipsestext

                + '</span><span class=expanded>'

                + content

                + '</span><a href=javascript:void(0) class=collapsed>'

                + moretext

                + '</a><a href=javascript:void(0) class=expanded>' 

                + lesstext

                + '</a>'

    $(element).html(html);

}

}

Then I made slight changes to the other looping function as well:

    $(function () {

    $.each($(.limitedTextSpace), function(index, value) {

        showMoreLess(value);

    });



    $(.expanded).hide();

    $(.expanded, .collapsed).click(function() {

        $(this).parent().children(.expanded, .collapsed).toggle();

    });

});

However, now there is the issue with when there are breaks in the text. The code interprets each paragraph of the same text as a different expand/collapse instances - meaning instead of one expand/collapse for a block of text, there is multiple for each paragraph.