how to acheive expand and collapse functionalities in asp.net

Posted by Maheshvishnu under ASP.NET on 9/21/2012 | Points: 10 | Views : 12969 | Status : [Member] | Replies : 2

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

mahesh

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	This can be achieved using javascript. You can use the following code for reference -- <div> <span><a id="displayTextEName" href="javascript:toggle();">[ Expand ]</a></span> </div> <div id="toggleTextEName" style="display: none;"> -- Your Textarea control </div> Then the javascript function toggle should be defined as below -- function toggle() { var eleMethod = document.getElementById("toggleTextEName"); var textMethod = document.getElementById("displayTextEName"); if (eleMethod.style.display == "block") { eleMethod.style.display = "none"; textMethod.innerHTML = "[ Expand ]"; } else { eleMethod.style.display = "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. Thanks Tanuja (If this content helped you, Please mark it as Answer) Maheshvishnu, if this helps please login to Mark As Answer. \| Alert Moderator

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

 <div>

      <span><a id="displayTextEName" href="javascript:toggle();">[ Expand ]</a></span>

</div>

<div id="toggleTextEName" style="display: none;">

 -- Your Textarea control

</div>

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

function toggle() 

{

            var eleMethod = document.getElementById("toggleTextEName");

            var textMethod = document.getElementById("displayTextEName");

            if (eleMethod.style.display == "block") {

                eleMethod.style.display = "none";

                textMethod.innerHTML = "[ Expand ]";

            }

            else {

                eleMethod.style.display = "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.

Thanks
Tanuja
(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

0	Javascript Code... function doMenu(item) { obj = document.getElementById(item); col = document.getElementById("x" + item); if (obj.style.display == "none") { obj.style.display = "block"; col.innerHTML = "[-]"; } else { obj.style.display = "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..... </textarea> </div> Regards, Vikash Pathak Maheshvishnu, if this helps please login to Mark As Answer. \| Alert Moderator

Javascript Code...

    function doMenu(item) {

        obj = document.getElementById(item);

        col = document.getElementById("x" + item);

        if (obj.style.display == "none") {

            obj.style.display = "block";

            col.innerHTML = "[-]";

        } 

        else {

            obj.style.display = "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.....

    </textarea>

</div>

Regards,
Vikash Pathak

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

Latest Posts