[RESOLVED] Changing the height of a div with onclick

Dawg

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

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

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

Dawg wrote:
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

Thanks, it figures it would need some js. Too bad we can't have one net programming language.

Here is the test page

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

Dawg wrote:
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

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.