Web Analytics Made Easy -
StatCounter Collapsible Text? - CodingForum

Announcement

Collapse
No announcement yet.

Collapsible Text?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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

  • #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

    Working...
    X