[HELP NEEDED] - DHTML Button toggle switch

[everah]

I have searched high and low for this topic and can't find it anywhere. I have an administration form that lists tasks for an admin. For each item on the task list I want to offer the admins a button that will dynamically show a form within the page and just under the task item (without sending the page back to the server at this point). When the button is clicked I want the text on the button to change from "Click here to add comments" to "Close this form". I also want any open form to close if another 'open form button' is pressed.

I am still not that strong in JavaScript and DOM. I am not necessarily looking for some to do this for me, but I would like at least a starting point. I have found a small snippet that uses an image as the trigger for the event, but I would like to use a button to stay consistent with the look and feel of the page. All help would be greatly appreciated.

[COBOLdinosaur]

Changing the text on the button is the easy part:

<input type="button" value="Click here to add comments"
   onclick="this.value='Close this Form">

For the ther part put each form inside of a div with a unique id and style it hidden:
<div id='number1' style="display:hidden">
<form etc...</div>

on the element where the event gets triggered:

onclick="showform('number1')"

The function would look something like:

<script type="text/javascript">
lastopen=false;
function showform(x)
{
   if (lastopen) lastopen.style.display='hidden';
   lastopen=document.getElementById(x);
   lastopen.style.display='block';
}
</script>

[everah]

I found something like what I want and modified it for my needs (Thank you community server forums!). Here is the JS I have...

function togglePanel( targetID, buttonID, trackerID )
{
	if ( document.getElementById ) 
	{
		var target = document.getElementById( targetID ); // ID of the Div to show or hide
				
		if ( target != null ) 
		{
			target.style.display = ( target.style.display != "none" ) ? "none" : "";
		}
		
		var button = document.getElementById( buttonID ); // ID of the button to change values
		
		if ( button != null )
		{
			button.value = ( target.style.display != "none" ) ? "Minimize this comment form" : "Print a repair pass with comments";
		}
		
		var tracker = document.getElementById( trackerID );
		
		if ( tracker != null ) 
		{
			tracker.value = ( target.style.display == "none" ) ? "True" : "False";
		}
		
		return false;
	}
	
	return true;
}

And here is the HTML and trigger...

<input id="problem_tracker_1" name="problem_tracker_1" type="hidden" value="True" /><input type="button" id="problem_1_clicker" name="problem_1_clicker" onclick="return togglePanel('gate_pass_form_1', 'problem_1_clicker', 'problem_tracker_1');" value="Print a repair pass with comments" />
<div id="gate_pass_form_1" style="display: none;">
<form method="POST" action="http://localhost/nummi/admin/gate_pass.php?vid=363&amp;sid=bf7ba23385319c8871eb7a92846f4260" target="_blank" name="gate_pass_problem_1">
<table border="0" cellpadding="0" cellspacing="0" width="90%" align="center">
	<tr>

		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
			<span class="nav">Why is this pass needed? <br /></span>
			<span class="gen"><input type="checkbox" name="itembox_1"> &nbsp; PEP Repair <input type="checkbox" name="itembox_2"> &nbsp; QA Analysis <input type="checkbox" name="itembox_3"> &nbsp; Other Repair <input type="checkbox" name="itembox_4"> &nbsp; Other Analysis</span>

		</td>
	</tr>
	<tr>
		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
			<span class="nav">What items need repair? <br /></span>
			<span class="gen"><input type="checkbox" name="itembox_5">&nbsp;Glass <input type="checkbox" name="itembox_6">&nbsp;Body <input type="checkbox" name="itembox_7">&nbsp;Metal <input type="checkbox" name="itembox_8">&nbsp;Paint <input type="checkbox" name="itembox_9">&nbsp;Light Repair <input type="checkbox" name="itembox_10">&nbsp;Heavy Repair <input type="checkbox" name="itembox_11">&nbsp;Other</span>

		</td>
	</tr>
	<tr>
		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
			<span class="nav">Describe the work to be done, line by line: <br /></span>
			<span class="gen">Line 1: <input type="text" name="item_desc_1" class="post" size="80" maxlength="80" /></span><br />
			<span class="gen">Line 2: <input type="text" name="item_desc_2" class="post" size="80" maxlength="80" /></span><br />

			<span class="gen">Line 3: <input type="text" name="item_desc_3" class="post" size="80" maxlength="80" /></span><br />
			<span class="gen">Line 4: <input type="text" name="item_desc_4" class="post" size="80" maxlength="80" /></span><br />
		</td>
	</tr>
	<tr>
		<td class="row1" height="25" colspan="3" align="center" valign="middle">
			<input type="hidden" name="vid" value="363" />
			<input type="submit" name="submit" value="Make a Gate Pass" class="mainoption" />

		</td>
	</tr>
</table>
</form>
</div>

This actually works exactly as I want it to. Is there a way using your code (again, I am not that savvy in JS) to close one DIV and open another with one click of the button?

BTW, Thanks for the response. I really appreciate it.

[Kor]

something like this?:

PHP Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var v =['closeD1-openD2','closeD2-openD1']
function switchD(b){
var vv=b.value
document.getElementById('d1').style.display=(vv==v[0])?'none':'block';
document.getElementById('d2').style.display=(vv==v[0])?'block':'none';
b.value=(vv==v[0])?v[1]:v[0];
}
</script>
</head>
<body>
<div id="d1">DIV 1</div>
<div id="d2" style="display:none">DIV 2</div>
<br>
<br>
<input type="button" value ="closeD1-openD2" onclick="switchD(this)">
</body>
</html> 


[everah]

Thanks, that is exactly what I was looking for. I am having internet troubles at work right now (a big thank you to the developer that built Zotob) but as soon as I can I will implement your code to see if it fits with that I am doing.

[mrruben5]

Uh yeah right.

http://onlinetools.org/tools/domcollapse/index.html

[everah]

So does domCollapse only work with the DIV element immediately following the trigger?