jQuery 'Show More' 'Show Less' code issue

Question

I am using below jQuery code to show/hide extra text on my web page

jQuery.fn.shorten = function(settings) {
  var config = {
    showChars : 100,
    ellipsesText : "...",
    moreText : "more",
    lessText : "less"
  };

  if (settings) {
    $.extend(config, settings);
  }

  $('.morelink').live('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
      $this.removeClass('less');
      $this.html(config.moreText);
    } else {
      $this.addClass('less');
      $this.html(config.lessText);
    }
    $this.parent().prev().toggle();
    $this.prev().toggle();
    return false;
  });

  return this.each(function() {
    var $this = $(this);

    var content = $this.html();
    if (content.length > config.showChars) {
      var c = content.substr(0, config.showChars);
      var h = content.substr(config.showChars , content.length - config.showChars);
      var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span   class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' +  config.moreText + '</a></span>';
      $this.html(html);
      $(".morecontent span").hide();
    }
  });
};

I am trying to apply it on below html:

    <div id="idcncinfobox" class="cncinfobox">             
        <div class="basic_cnc_info_layout">
            <span class="cncDesc more">asdjlkaj  lakjd alkjs dajskldj uiojlksjdf kljsdf jirj klcj sdklfj skldjf rijfkls dj fjsdklfjr iej kldjf sh fbasnmb fa slkjdf dfjkjri wsll l ljdklfjkljsd jskldfj jsdklfj jskldjf jklsdjfklsdj irjklsjdfir lskdjfir jklsjdfkl jsir jklsjdklfjrijklsjdklf</span>
            <dl>                        
                <dt>Aliases</dt><dt1>:</dt1><dd itemprop="actor" class="cncAliases more">fasdfsdfssdlkfjskldjf klsjlkdfjklsdj jsdklfj sjdkljf sjkldfdjkl ksdjl; fsdj f;sdkljf sdkl;fj sdkjkfjsdkljfklj jsdkl;fjklsdjfkljdkjfkljdklsjfkldjsklf</dd>
            </dl>                        
        </div>   
    </div>

I am using below js code to call jQuery function:

    $(document).ready(function() {
        $(".cncDesc").shorten({
             "showChars" : 50,
            "moreText"  : "See More",
            "lessText"  : "Less"
        });
        $(".cncAliases").shorten({
             "showChars" : 20,
            "moreText"  : "See More",
            "lessText"  : "Less"
        });
    });

As you see here I am trying to get show/hide effect on two elements on same page. And for some reason it's not working. If I apply it on only one element, it works fine. I tried debugging it and found that when I am applying it on two elements, it goes into 'Click' function twice and ends up un-doing the effect.

I have created a Fiddle here http://jsfiddle.net/RzB7E/4/

sberry · Accepted Answer · 2012-12-21T06:22:58.900

3

I think you can just change this line

$('.morelink').live('click', function() {

to

$(this).find('.morelink').live('click', function() {

as you can see here: http://jsfiddle.net/RzB7E/7/

When you bind to a click event via a class, you bind too all clicks for all elements of that class. The change above specifies the specific .morelink to apply the click to.

edited Dec 21 '12 at 06:22

answered Dec 21 '12 at 06:17

sberry

128,281
18
138
165

Have one more issue with above code. It works on text but when I apply it over a div which contains some html (for example an anchor tag), it does not work. Anything I can do to make it work over html content also ? – Vikalp Jain Jan 06 '13 at 16:32

score 2 · Answer 2 · edited May 23 '17 at 12:04

2

Agree with @Sberry answer but just as a suggetion, use this

$(this).find('.morelink').on('click', function() {

Since from jQuery v.1.7+ onwards the .live() method is apparently deprecated. Details here

edited May 23 '17 at 12:04

Community

1
1

answered Dec 21 '12 at 06:22

palaѕн

72,112
17
116
136

jQuery 'Show More' 'Show Less' code issue

2 Answers2