By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,661 Members | 1,917 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,661 IT Pros & Developers. It's quick & easy.

How to collapse-expand portion of text in javascript

P: 2
hello there

is there a way to collapse-expand part of my text

the problem is that i am retriving text data from my data base from a field named "Description" and i want to display the first 3 lines only on a label or textbox and if the user hit a certain button the remmaing lines or text shall appear and if the user hit that button agin then thoses lines (with out the first 3-lines) should disappear

to solve it i replaced the description field in the database with 2 filds ;one for the first 3 lines ane the second for the remaining text

but i don't think that solution is practical

so any idea?
Jan 6 '08 #1
Share this Question
Share on Google+
1 Reply


Markus
Expert 5K+
P: 6,050
To collapse or expand a DIV / other element you would need to use getElementById('id_of_element') and the use this to toggle with the style of the element

Expand|Select|Wrap|Line Numbers
  1. function expand(div)
  2. { //begin function
  3. var element = document.getElementById(div).style; //get the element
  4.   if(element.display == "none"){ //if element is already hidden...
  5.     element.display = ""; //... toggle the display
  6.   } else { //if element is not hidden...
  7.     element.display = "none"; //... toggle the display
  8.   }
  9. }
  10.  
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function expand(div)
  5. { //begin function
  6. var element = document.getElementById(div).style; //get the element
  7.   if(element.display == "none"){ //if element is already hidden...
  8.     element.display = ""; //... toggle the display
  9.   } else { //if element is not hidden...
  10.     element.display = "none"; //... toggle the display
  11.   }
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <div id="hide" style="display:;" onclick="expand('hide')">
  17. <p>CONTENT</p>
  18. <p>CONTENT</p>
  19. <p>CONTENT</p>
  20. <p>CONTENT</p>
  21. <p>CONTENT</p>
  22. <p>CONTENT</p>
  23. <p>CONTENT</p>
  24. <p>CONTENT</p>
  25. <p>CONTENT</p>
  26. <p>CONTENT</p>
  27. <p>CONTENT</p>
  28. </div>
  29. </body>
  30.  
Jan 6 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.