Show only the first few lines of a <div> tag?

Question

I'm looking for a code that hides all but the first few lines of a <div> tag in an html document, and provides a "read more" button. when the user clicks the "more" button, i want the div to expand to display its full contents without requiring a reload or redirecting to a new page.

I have found several scripts on the internet, but they all seem to be hiding the entire div tag, and they require a refresh.

Any idea how i can do this?

Answer 1

I haven&#039;t really thought this idea out yet, but maybe set up two styles with different heights: one being the hidden one with a smaller height and overflow:hidden, then another that is the full height. Set the div to the first style, and then make the &quot;read more&quot; link switch out the style with javascript maybe? I&#039;m not sure, but good luck.

Answer 2

Use JavaScript...

function limitLength(id,len){

var element = document.getElementById(id);

element.innerHTML = element.innerHTML(substr(0, len));

}

HTML would be:

&lt;body onload=&quot;limitLength(&#039;myDiv&#039;,10);&quot;&gt;

&lt;div id=&quot;myDiv&quot;&gt;Div contents&lt;/div&gt;

&lt;/body&gt;

This SHOULD limit the length of the string in your div to 10 characters, change the character limit as necessary...

If it doesn&#039;t work let me know...I haven&#039;t tested it.