Click to See Complete Forum and Search --> : [RESOLVED] Changing the height of a div with onclick


Dawg
06-28-2009, 12:06 AM
I have a mail form with a table to delineate the fields needed to be filled in.

I have added a new row for the possiblity of a free local delivery.

In the row is a check box and a few text fields that need to be filled in with address information.

I want to hide the fields until the user checks the Delivery Request check box, then expand the div to show the needed fields.

I am able to set the div to a start height but it still show a few fields

I am not able to figure out how to get it to expand and show all the fields.

I looked through my books and only found rollover or hover examples which I tried to imitate too no luck.

Can someone point me to a site or code example so I can see what I may be missing??

Thanks

bradgrafelman
06-28-2009, 01:05 AM
Why not wrap the hidden fields in a div that is set to display:hidden by default and toggle this value when the checkbox is checked/unchecked?

Dawg
06-28-2009, 01:57 PM
That's sort of what I was trying to do. but I don't seem to be getting the onClick code or maybe I need to do something different to get it to work.

I don't necessarily want someone to write it for me but I cannot seem to find out how to change a property by clicking, only hover seems to work.

PS: If the checkbox is outside the div set to hidden, how do you change the div property from outside.

bradgrafelman
06-28-2009, 02:09 PM
how do you change the div property from outside.Give the div an ID so you can reference it in the JS. Quick and dirty example:

<script type="text/javascript">
function toggleMoreInfo(id, enabled) {
document.getElementById(id).style.display = (enabled ? "block" : "none");
}
</script>

<input type="checkbox" name="moreinfo" value="yes" onclick="toggleMoreInfo('info', this.checked)">Show more info?<br>
<br>
<div id="info" style="display: none">
Here is more info!
</div>

Dawg
06-28-2009, 02:36 PM
Thanks, it figures it would need some js. Too bad we can't have one net programming language.

Here is the test page (http://www.anchorswaymarine.com/z_awm_engines.php)

Thanks again

PS: Boy I feel stupid being a senior member and not knowing this. I guess that the Senior Member means i just ask lots of questions :)

bradgrafelman
06-28-2009, 02:38 PM
Too bad we can't have one net programming language.Eh... that's sort of impossible, because that would become one hugely bloated, all-encompassing language.

I'd rather have a standard subset of languages for each task; HTML to define a skeleton structure of data, CSS to style that structure, and JavaScript to make the styled structure interact with the user.

Dawg
06-28-2009, 05:18 PM
I spoke too soon.

Using the JS to make the fields visible or not was easy.

After clicking on the submit button and all sorts of stuff happens.

So for now I will have to live with the fields being visible all the time until I can figure things out.