how to acheive expand and collapse functionalities in

Posted by Maheshvishnu under ASP.NET on 9/21/2012 | Points: 10 | Views : 8537 | Status : [Member] | Replies : 2
i have 100 lines of text in textarea control

beside textarea i have one button.if i click on that button textarea has to be dissappear and if click again it has to be appear.

how can i get this functionality.

Thanks in advance



Posted by: Tanujad on: 9/21/2012 [Member] Starter | Points: 25

This can be achieved using javascript.
You can use the following code for reference --


<span><a id="displayTextEName" href="javascript:toggle();">[ Expand ]</a></span>
<div id="toggleTextEName" style="display: none;">
-- Your Textarea control

Then the javascript function toggle should be defined as below --

function toggle() 

var eleMethod = document.getElementById("toggleTextEName");
var textMethod = document.getElementById("displayTextEName");
if ( == "block") { = "none";
textMethod.innerHTML = "[ Expand ]";
else { = "block";
textMethod.innerHTML = "[ Collapse ]";


For your case as you require the expansion functionality on button click, in the above code instead of hyperlink you can take a button control and Onclick event of button you can call the javascript function toggle().

Please mark it as answer if this solves your query.

(If this content helped you, Please mark it as Answer)

Maheshvishnu, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vikash on: 9/22/2012 [Member] Starter | Points: 25

Javascript Code...

    function doMenu(item) {

obj = document.getElementById(item);
col = document.getElementById("x" + item);
if ( == "none") { = "block";
col.innerHTML = "[-]";
else { = "none";
col.innerHTML = "[+]";

html code
<a href="javascript:doMenu('main2');" id="xmain2">[+]</a>

<div id="main2" style="margin-left:1em">
<textarea id="TextArea1" cols="20" rows="2">
this is ur text area.....

Vikash Pathak

Maheshvishnu, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response