jQuery multiple DIVs - show/hide reset
<p><strong>EDIT 2:</strong> probably best to see the page in action - <a href="http://www.justdoors.co/product-selection" rel="nofollow">http://www.justdoors.co/product-selection</a> - basically I need it so if someone chooses something in the first selection box then they click next it opens up another dropdown, if someone goes back and changes the option in the first dropdown I need the second bit to reset and hide until they click next on the relevent option.</p>

<p>Hi 
    [selection box]
     
     
     </p>

<p>If user chooses <code>&lt;option 1&gt;</code> it shows <em>option 1 div</em> with info and link to show <strong>DIV A</strong>
If user chooses <code>&lt;option 2&gt;</code> it shows <em>option 2 div</em> with info and link to show <strong>DIV B</strong>
If user chooses <code>&lt;option 3&gt;</code> it shows <em>option 3 div</em> with info and link to show <strong>DIV C</strong></p>

<p>If user clicks on the link to show <strong>DIV A</strong> this brings up a second selection box with similar options.</p>

<p>At the moment if a user has clicked to show <strong>DIV A</strong> and then changes their mind about the first selection from the dropdown box <strong>DIV A</strong> stays there, I need it to reset and hide <strong>DIV A</strong> so that when they click the link from the option it will then show the new selection.</p>

<p>Written another way:
User chooses <code>&lt;option 1&gt;</code> clicks link to <strong>DIV A</strong> >> <strong>DIV A</strong> shows but then user changes mind and selects <code>&lt;option 2&gt;</code> >> <strong>DIV A</strong> needs to hide >> user can then click link to show <strong>DIV B</strong>.</p>

<p>This is the script I'm using that shows the DIV A/B/C:</p>

<pre><code>$(document).ready(function() {
  $('#divA-holder').hide();
  $('#divA-link').click(function() {
    $('#divA-holder').toggle(400);
    return false;
  });
  $('#divB-holder').hide();
  $('#divB-link').click(function() {
    $('#divB-holder').toggle(400);
    return false;
  });
  $('#divC-holder').hide();
  $('#divC-link').click(function() {
    $('#divC-holder').toggle(400);
    return false;
  });
});
</code></pre>

<p>Along with: </p>

<pre><code>    jQuery("#selector1").change(function(){
    if (jQuery(this).val() == "1" ) {
        jQuery("#option1div").slideDown("fast");
    } else {
        jQuery("#option1div").slideUp("fast");
    }
});
</code></pre>

<p>To show/hide the DIVs with the option info at the start.</p>

<p>I'm probably over complicating matters so any pointers would be great!</p>

<p><strong>EDIT:</strong> I guess thinking about it I need something in the selector1 function to make sure all other divs after that are hidden, any pointers on how I can do that would be appreciated .</p>
