expand collapse html field Firefox

Question

How do I expand/collapse an html field in Firefox? I incorporated a few JavaScript examples from the web, but they only worked in IE. (I'm limited to HTML and JS)

Suggestions are appreciated.

Thanks.

Yes, I would like to show/hide divs and such.

Answer 1

I'm afraid I don't understand your question entirely.

First off, what do you mean by 'html field'? Do you mean as in form fields (text boxes, radio controls, etc?). If so, do you mean how do you dynamically resize them? ('Expand/collapse' to me is ambiguous).

If you mean you want to show/hide divs and such, that's much easier using css and javascript. See this example.

Answer 2

What you probably want to do is change css property display of the element to "none" to hide the element and change it back to "block" or "inline" to show it again. It can be done with javascript.

If you want a fancy animation, you could use some kind of javascript library which offers different effects (you may want to check out toggle) or components (for example Accordion).

Answer 3

If your input field has an ID attribute, you can use CSS to style it as needed. I recommend using a library like jQuery, but I have provided an example without as well:

  // hiding without jQuery
  document.getElementById('myInput').style.display = 'none'
  // showing without jQuery
  document.getElementById('myInput').style.display = 'block'

  // hiding with jQuery
  $('#myInput').hide()
  // showing with jQuery
  $('#myInput').show()

jQuery: http://jquery.com