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>