jQuery multiple DIVs - show/hide reset

EDIT 2: probably best to see the page in action - http://www.justdoors.co/product-selection - 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.

Hi [selection box]

If user chooses <option 1> it shows option 1 div with info and link to show DIV A If user chooses <option 2> it shows option 2 div with info and link to show DIV B If user chooses <option 3> it shows option 3 div with info and link to show DIV C

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

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

Written another way: User chooses <option 1> clicks link to DIV A >> DIV A shows but then user changes mind and selects <option 2> >> DIV A needs to hide >> user can then click link to show DIV B.

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

$(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;
 开发者_如何学C });
});

Along with:

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

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

I'm probably over complicating matters so any pointers would be great!

EDIT: 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 .

Play with this and let me know if this is what you're looking for: http://jsfiddle.net/bozdoz/RpakG/

The only thing I really did was to change the toggle() to hide() all and show() the particular div based on the value of the option value. So, I hope that solves your problem: on change, hide every div, show the div designated by the option value. Because the handler is on change, it won't inadvertently hide the desired div if the user selects the same div. It will only hide the other divs.