-4

I am trying to creating my own read More/less function for comments. ReadMore ReadLess Image.

During developing this, I followed by a problem. Suppose, I have 3 comments(see first Image) with more than 500 chars. In these comments all/full text is not shown, so I add ReadMore Links to read all comment. Show Only that class where I clicked..

Problem : When I click on one of these links ReadMore its shows me all three comments with full text Instead to show me only clicked class text. Problem Image: img.ctrlv.in/img/16/03/12/56e4110ccb82d.png

My jsBin : https://jsbin.com/waqoror/1/edit?html,js,console,output

Paste my Snippet also here Now

function mangeText(text) {
  var minCharLength = 50;
  var readL ="Read Less";
  var readM = "Read More";
  var txt = text,
    txtLength = 0,
    totLength = "";
  var startDisplayText = "",
    startupCont = "",
    hiddenContent = "";
  txtLength = txt.length;
  for (var i = 0; i < minCharLength; i++) {
    totLength += txt[i];
    //console.log("["+i+"] "+totLength);
  }
  if (txt.length >= (minCharLength + 50)) {
    startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength +
      " <span>" +
      "<a href='#' onclick='ReadMoreLess()' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " +
      readM +
      "</a>" +
      "</span>" +
      "</span>";

    hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt +
      " <span>" +
      "<a href='#' onclick='ReadMoreLess()' class='txb_rdL  _pedu'> " +
      readL +
      " </a>" +
      "</span>" +
      "</span>";
    txt = startupCont;
    txt += hiddenContent;
  }
  return txt;
}

function ReadMoreLess(){
            
            if($(".tetb_apndhd").css("display") == "none"){
                console.log("IF");
                $(".tetb_apndhd").css({"display":"inline-block"});
                $(".tetb_apndShw").css({"display":"none"});
            }else if(($(".tetb_apndhd").css("display") == "inline-block")){
                console.log("ELSE IF");
                $(".tetb_apndShw").css({"display":"inline-block"});
                $(".tetb_apndhd").css({"display":"none"});
            }
        }

$(".apndbtn").click(function (){
    var txt = mangeText($(".txt").val());
    $(".dclr").append(txt);
});
.txt{width:300px;height:150px;resize:none}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea class="txt" id="tt">Etiam vitae faucibus urna. Cras in enim ac eros cursus euismod. Aenean tristique arcu eu quam pharetra rutrum. Proin tincidunt magna at nibh tristique, eu finibus ipsum ultricies. Nunc eget lorem ac diam dictum condimentum. Vestibulum eu nisi a lorem ornare finibus.</textarea><br/>
<button class="apndbtn">Append</button>
 <div class="dclr"></div>
</body>
</html>

1

1 Answer 1

0

My solution :

function mangeText(text) {
  var minCharLength = 50;
  var readL ="Read Less";
  var readM = "Read More";
  var txt = text,
    txtLength = 0,
    totLength = "";
  var startDisplayText = "",
    startupCont = "",
    hiddenContent = "";
  txtLength = txt.length;
  for (var i = 0; i < minCharLength; i++) {
    totLength += txt[i]; 
    //console.log("["+i+"] "+totLength);
  }
  if (txt.length >= (minCharLength + 50)) {
    startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength +
      " <span>" +
      "<a href='#' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " +
      readM +
      "</a>" +
      "</span>" +
      "</span>";



    hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt +
      " <span>" +
      "<a href='#' class='txb_rdL  _pedu'> " +
      readL +
      " </a>" +
      "</span>" +
      "</span>";
    txt = startupCont;
    txt += hiddenContent;


  }
  return txt;
}

function ReadMoreLess(event){
  //alert(event.target);

}


$(".apndbtn").click(function (){
    var txt = mangeText($(".txt").val());
    $(".dclr").append(txt);
      $( ".txb_rdM" ).bind( "click", function() {
      $(this).parents(".umoriRut").hide().next().show();
      return;
    }); 
  $( ".txb_rdL" ).bind( "click", function() {
      $(this).parents("._umori120Rut").hide().prev().show();
    }); 

});

I removed onClick event on links and add this code to .apndbtn click function :

$( ".txb_rdM" ).bind( "click", function() {
          $(this).parents(".umoriRut").hide().next().show();
          return;
        }); 
      $( ".txb_rdL" ).bind( "click", function() {
          $(this).parents("._umori120Rut").hide().prev().show();
        }); 
2
  • why do u use return ? $(this).parents(".umoriRut").hide().next().show(); return; -- <
    – hijckBoy
    Mar 15, 2016 at 15:43
  • So that the default action of the event will not be triggered.
    – bugyt
    Mar 15, 2016 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.