How to make an expandable textbox loaded from the data base

Hi Guys ... Basicly what i need is to load a text from the database em show it in a text box but only about 5 lines... and add a button "readmore" when clicked the box should expand and show the rest of the content...


Does anyone could help me ?

 

Is this what you are looking for?

<script type="text/javascript">
function showmore() {
document.getElementById('mytextbox').style.overflow='scroll';
document.getElementById('mytextbox').rows='10';
}
</script>
<textarea id="mytextbox" rows="5" cols="40" style="overflow:hidden">line 1  
line2 
line3 
 line4 
  line5 
   line6 
    line 7
     line8
     line9 
      line10</textarea><a href="javascript:showmore();">Read More</a>

Code (markup):

 

I will try that... the thing is u putted there like Line 1 line 2 line 3.... and if the content comes from the database i just ignore them ?

Thanks...
Very helpful

 

just replace the line1 line 2 etc, that's just for an example

 

Mate.. it works fine... but the only problem that im having is that now the users are able to delete the content... is there anyway that i can do to block it ?

thats my code:
<script type="text/javascript">
function showmore() {
document.getElementById('mytextbox').style.overflow='hidden';
document.getElementById('mytextbox').rows='30';
}
</script>

<div style="width:309px; margin-left:10px;">
<p>
<span class="title_principal_blue">
<?=$category->name ?>
</span>
</p>

<div id="banner-highlight">
<img src="images/upload/<?=$category->picture1 ?>" width="348" height="162" /><br />
</div>
<textarea id="mytextbox" rows="5" cols="48" style="overflow:hidden">
<?=$category->description?>
</textarea><a href="javascript:showmore();"><strong>Read More</strong></a>
<br />
</div>
_______________________________________________
+ my CSS

#mytextbox{
border:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#004c6d;
font-size:11px;
}

Thanks Mate

 

On your <textarea tag add this: disabled="disabled"