collapsing a form with javascript

Question

Is it possible with javascript, and without using a framework such a jquery, to have a simple form with a a list of checkboxes or radio buttons, and if a particular one is selected, expand to show further further checkboxes/radio buttons?

Answer 1

Yes, it's possible, but a lot more work than doing it with a framework. You'll need to write DOM traversal code to find elements in the form, event binding code to bind functions to the events for the form elements (this differs between IE and non-IE), and then use the style.display property for sub-elements to hide or show them.

If you're looking to learn more, Quirksmode.org has some of the best explanations of basic Javascript that I've found.

Answer 2

Anything you can do in any framework you can do without a framework.

Frameworks just make it easier, in many cases, so you don't have to deal with the hard lifting.

What you will probably want to do is just have an onclick event handler on each checkbox or radio button, and when that is clicked, then create a new div and populate it with the extra information, or, if that information was already populated and was just hidden using css then have the event handler make it visible.

There are many ways to do what you are proposing, depending on what your vision as to the usability is.

Answer 3

Sure using onChange events and dom manipulation... Also you might consider writing your own animations, but really why if so many communities did the work for you.

Answer 4

<input ... onclick="toggleDetails(this);" />
<div id='detailsView' style='display:none'gt;
    content to display when checked
</div>

... script ...

function toggleDetails(chk) {
  document.getelemantById('detailsView').style.display = 
    chk.checked ? "block" : "none";
}

In all honesty though, using a framework like jQuery would be nicer in the long run.