Question

I have one field like Biography which is having a text, and I need to show half (some) of the text of that field on first page and then continue reading link appears, after clicking that link remaining text will be displayed on the same page

I need to achieve that in HTML.
Can anyone help me?

Answer 1

Note that this is rapid prototyping. You can get better mileage if you are using jquery.

<div>

<span> Biography, first half ...</span>
<a href="javascript:showAll('bioSecondHalf')">Continue reading</a>

<span id="bioSecondHalf" style="display:none"> Biography, second half</span>

</div>

<script type="text/javascript">
   function showAll(id) {
      document.getElementById(id).style.display = "block";
   }
</script>

If you are starting with the full block of text and need to do everything client side:

<div id="biography" style="display:none">

Biography first half
Biography second half

</div>

If the block of text contains no markup html, then, you can grab the contents of the biography div and manipulate it on page load

<script>
window.onload = function() {
   var bioText = document.getElementById("biography").innerHTML;
   var bioFirstHalf = bioText.substring(0,bioText.length/2);
   var bioSecondHalf = bioText.substring(bioText.length/2);
   document.getElementById("biography").innerHTML = bioFirstHalf + " <a href='javascript:showAll(\"bioSecondHalf\")'>Continue reading</a>" + " <span id='bioSecondHalf' style='display:none'>" + bioSecondHalf + "</span>"
}
</script>