Show two line Content and show Readmore Button

   HTML
====================================================================

<h2 class="pdProductHeading"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat nibh vel porta ornare. </h2> <span id="morec" style="display: none;">See More.</span> <span id="lessc">See less.</span>

  Javascript
====================================================================

var el = document.querySelector(".pdProductHeading"); var seeMoreBtn = document.getElementById("morec"); el.style.lineHeight = '30px'; el.style.height = 'auto'; var divHeight = el.offsetHeight; var lineHeight = parseInt(el.style.lineHeight); var lines = divHeight / lineHeight; if (lines > 2) { el.style.height = "62px"; seeMoreBtn.style.display = "inline-block"; } else { seeMoreBtn.style.display = "none"; }

Share on Google Plus

About Amit

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.