Web Analytics Made Easy - StatCounter Collapsible Text? - CodingForum

Announcement

Collapse
No announcement yet.

Collapsible Text?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Collapsible Text?

    Hey all,

    I want to have a link on my website that allows you to expand/collapse a certain table (i.e: show or hide).

    The page looks like this:

    Code:
    <a href="#" onClick="WHAT GOES HERE">Click here</a> to show the options.

<!--If they click the link above, show the following table and change the word 'show' to 'hide'--->
<!--If they click the link again, hide the following table and change the word 'hide' to 'show'--->
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input name="page_bg_url" type="text"></td>
</tr>
<tr>
<td>
<select name="page_bg_repeat">
<option value="no-repeat">No repeat</option>
<option value="repeat">Tile (all directions)</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="page_bg">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</td>
</tr>
</table>
    Thanks.
    -influxer
    Tags: None
  • #2
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>64878</title>
	</head>
	<body>
		<input id="myform_button" type="button" value="Hide options" onclick="toggle_form()">

		<form id="myform" action="" method="post">
			<fieldset>
				<input name="page_bg_url" type="text"></td>
				<select name="page_bg_repeat">
					<option value="no-repeat">No repeat</option>
					<option value="repeat">Tile (all directions)</option>
				</select>
				<select name="page_bg">
					<option value="no">No</option>
					<option value="yes">Yes</option>
				</select>
			</fieldset>
		</form>

		<script type="text/javascript">
			var form = document.getElementById('myform');
			var button = document.getElementById('myform_button');

			function toggle_form()
			{
				form.style.display = (form.style.display == 'none') ? 'block' : 'none';
				button.value = (button.value == 'Hide options') ? 'Show options' : 'Hide options';
			}

			toggle_form();
		</script>
	</body>
</html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

    Comment

    Previous template Next
    Working...
    X