1) Script Title: Switch Content Script II (icon based)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...chcontent2.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:

Code:
<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>