Bonzy JC Bonzy JC - 26 days ago 16
CSS Question

show more code not working properly in HTML

I am using code for show more/show less for long paragraphs in HTML and CSS for my page.
The code works properly.(All the code will be displayed below).
But when the text is inside a

<p>
tag, it doesn't work. When I click show more, the full text disappears.
If I remove the
<p>
tag, the show more function works correctly.
Eg:

<div class="moreless">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>


If I write the above text without the
<p>
tag it works.

Have I missed some code?
This is the code I used:
HTML:

<div class="moreless">
<p>Lorem ipsum.....
</p>
</div>


CSS:

p {
color: #777777;
line-height: 24px;
margin: 0 0 20px;
text-align: justify;
}

.morecontent span {
display: none;
}
.morelink {
display: block;
line-height: 45px
}


Javascript:

$(document).ready(function() {
var showChar = 300;
var ellipsestext = "...";
var moretext = "Show more";
var lesstext = "Show less";


$('.moreless').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);
}

});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});

Answer

It's better to get .text() - not .html() - then get .substring(0,300) and use .toggleClass() with paragraphs to hide or display.

See this example

var showChar = 300;
var moretext = "Show more";
var lesstext = "Show less";

$(".moreless").each(function() {
  var ellipsestext = $(this).text() <= showChar ? "" : "...";
  //append shrinked text
  $(this).append("<p class='shrink'>" + $(this).text().substring(0, showChar) + ellipsestext + "</p>");
  //append readmore button
  $(this).append('<a href="#" class="moreellipses">'+ moretext +'</a>');
  //control visibility by class names
  $(this).find(".shrink").addClass("dsp");
  $(this).children().not(".shrink, .moreellipses").addClass("hdn");
});



$(".moreellipses").click(function() {
  $(this).closest(".moreless").find(".shrink").toggleClass("hdn");
  $(this).closest(".moreless").children().not(".shrink, .moreellipses").toggleClass("hdn");
  $(this).text($(this).text() == moretext ? lesstext : moretext);
  return false;
})
.dsp {
  display: block;
}
.hdn {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="moreless">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Comments