PDA

View Full Version : SwitchContent Form inside DIV



kacdown
10-08-2009, 10:54 AM
1) Script Title: Switch Content Script II (icon based)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

3) Describe problem: Need a script to enhance the feature of Switch Content.
I am having content in 2 div. Each div has a form where people can enter data. And at the end of each form there is a "Next" button.

SOLUTION NEEDED FOR THE FOLLOWING:
When the user clicks on the "Next" button it should take me to the next div of content.

Can anyone help me in this.

Script:



<div style="width:500px;">
<p><a href="javascript:faq.sweepToggle('contract')">Contract All</a> | <a href="javascript:faq.sweepToggle('expand')">Expand All</a></p>

<div class="eg-bar"><span id="faq1-title" class="iconspan"><img src="../images_en/minus.gif" width="13" height="13" /></span>Profile</div>
<div id="faq1" class="icongroup1 ">
<table width="480" border="0" align="center" cellpadding="0" cellspacing="1">

<tr>
<td width="230" valign="top"><strong> NAME</strong></td>
<td width="20" valign="top">&nbsp;</td>
<td width="226" valign="top"><label>
<input type="text" name="textfield" />
</label></td>
</tr>
<tr>
<td valign="top">TYPE</td>
<td valign="top">&nbsp;</td>
<td valign="top">
<select name="select" style="width:100px;">
<option selected="selected">Broker</option>
<option>Agency</option>
<option>Insurer</option>
<option>Association</option>
</select> </td>
</tr>

<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><label>
<input name="Submit" type="submit" style="width:60px;" value="Next" />
</label></td>
</tr>
</table>
</div>
<br />

<div class="eg-bar"><span id="faq2-title" class="iconspan"><img src="../images_en/plus.gif" width="13" height="13" /></span>Size Estimates</div>
<div id="faq2" class="icongroup1">
<table width="480" border="0" align="center" cellpadding="0" cellspacing="1">

<tr>
<td width="230" valign="top">Number of Users</td>
<td width="20" valign="top">&nbsp;</td>
<td width="226" valign="top"><input type="text" name="textfield32" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<input type="submit" name="Submit2" value="Next" style="width:60px;" /> </td>
</tr>
</table>
</div>
<br />


<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="100" align="center"><input type="submit" name="Submit222" value="Submit" style="width:60px; font-weight:bold; font-size:11px;" /></td>
<td width="100" align="center"><input type="submit" name="Submit232" value="Cancel" style="width:60px; font-weight:bold; font-size:11px;" /></td>
<td width="100" align="center"><label>
<input type="submit" name="Submit27" value="Reset" style="width:60px; font-weight:bold; font-size:11px;" />
</label></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</div>



<script type="text/javascript">
var faq=new switchicon("icongroup1", "div") //Limit scanning of switch contents to just "div" elements
faq.setHeader('<img src="../images_en/minus.gif" />', '<img src="../images_en/plus.gif" />') //set icon HTML
faq.collapsePrevious(true) //Allow only 1 content open at any time
faq.setPersist(false) //No persistence enabled
faq.defaultExpanded(0) //Set 1st content to be expanded by default
faq.init()
</script>