jquery - Expand/Collapse Text in HTML - Javascript -

i'm trying 'see more' (expand) , 'see less' (collapse) javascript code working. loop through , call javascript code on each class instance in html.

this works first time appears on page. put in console.logs see works correctly. i.e. each time click 'see more' console print 'expand/collapse' once.

however, each additional instance of device (on piece of text on page), won't expand @ all.

what happens in second instance, console prints - "expand, collapse". both instantaneously (which means doesn't expand @ all).

in third, prints - "expand, collapse, expand, collapse, expand, collapse". exponential growth... 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 jquery code loops through each class:

$(function () {     $.each($(".limitedtextspace"), function(index, value) {         showmoreless(value);     }); }); 

edit:

i followed roberto linares' format , recreated function 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 made slight changes other looping function well:

    $(function () {     $.each($(".limitedtextspace"), function(index, value) {         showmoreless(value);     });      $(".expanded").hide();     $(".expanded, .collapsed").click(function() {         $(this).parent().children(".expanded, .collapsed").toggle();     }); }); 

however, there issue when there breaks in text. code interprets each paragraph of same text different expand/collapse instances - meaning instead of 1 expand/collapse block of text, there multiple each paragraph.

it doesn't expand @ second , following times because lost complete content when replaced collapsed content. happens because never 'save' temporally complete content elsewhere can place when expand link clicked.

i recommend change javascript logic place in html both collapsed expanded content , toggle visibility through links.

example:

html:

<ul>     <li>         <span class="expanded">expanded html content</span>         <span class="collapsed">collap...</span>         <a href="javascript:void(0)" class="collapsed">expand</a>         <a href="javascript:void(0)" class="expanded">collapse</a>     </li>      <li>         <span class="expanded">expanded html content</span>         <span class="collapsed">collap...</span>        <a href="javascript:void(0)" class="collapsed">expand</a>         <a href="javascript:void(0)" class="expanded">collapse</a>     </li>      <li>         <span class="expanded">expanded html content</span>         <span class="collapsed">collap...</span>         <a href="javascript:void(0)" class="collapsed">expand</a>         <a href="javascript:void(0)" class="expanded">collapse</a>     </li>      <li>         <span class="expanded">expanded html content</span>         <span class="collapsed">collap...</span>         <a href="javascript:void(0)" class="collapsed">expand</a>         <a href="javascript:void(0)" class="expanded">collapse</a>     </li> </ul> 

javascript:

$(document).ready(function() {     $(".collapsed").hide();      $(".expanded, .collapsed").click(function() {         $(this).parent().children(".expanded, .collapsed").toggle();     }); }); 

working jsfiddle: http://jsfiddle.net/susxk/