how to display hidden text on a click of a button

Question

Hi,

I am quiet new to Web technology and need help with my latest assignment. What I want basically is>>A text box which displays 500 characters only no matter how long the content is and when clicked on a button it displays rest of the characters/text typed. So to give an basic idea. Lets take example of the text area/box in which we give our answers or comment or ask question. After we have typed in whatever we want to and we confirm or submit or whatever, It should display 500 characters and when click on a button it should display the rest of content. I hope I have made I question clear enough. Thanks in advanced!!!

Answer 1

I would use a logic like this:

• I would create a div on the page which is not visible.

• And once you press Confirm button, I would get the content of the textbox, write its value inside the div by using innerText function of JavaScript.

• Than I would get the first 500 characters of the text box, and assign it as a new value of the text box. (which will delete all the rest from the text box, but the main text will stay in non-visible div)

• When you click your button to be used for showing the all text, I would find the div which contains the value; get its value and assign it to the text box as a value. So that it shows all the text.

Maybe instead of div, you van use a hidden field as well.

Answer 2

That's quite a comprehensive question given your background. Furthermore you're not totally clear since you tag your question as jquery and drupal-6 but don't mention these things in your question.

If you're doing this in Drupal, you won't need to code anything since every CMS has this ability built-in. That's the usual 'read more' function which can be achieved in different ways.

Assuming you want to code this yourself for the sake of learning and better understanding I can only give you some broad ideas on how to do it.

PHP only:

• have a form with a textarea and a submit button
• on submit, store the text in a data source of your choice
• have the page show the first x characters of this text by doing something like substr($string, 0, 500) . ' ...'
• when the 'read more' link is clicked, have your script show the whole string and hide the 'read more' link

with Javascript:

replace the content with Javascript, for example jQuery's empty() and append() functions