Have Geek Brain

Collapsing a form using javascript

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

0


a source to share


4 answers


Anything you can do within any framework that you can do without a framework.

Frames just simplify in many cases, so you don't have to deal with hard lifting.



What you probably want to do is just an onclick event handler on every checkbox or radio button and when it is clicked then create a new div and fill it with additional information or if that information was already filled in and just hidden with css then the event handler will make it visible.

There are many ways to do what you suggest, depending on what your vision of usability is.

+2


a source 


<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";
}


However, to be honest, using a framework like jQuery will be more enjoyable in the long run.

+2


a source


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

If you'd like to learn more, Quirksmode.org has some of the best explanations for basic Javascript I've found.

+1


a source


Of course using onChange events and dom manipulation ... Also you might consider writing your own animations, but really why, if so many communities have done the job for you.

0


a source






More articles:


All Articles