Show/Hide DIV section onchange and onload with Javascript

Question

I thought I had this figured out but I was wrong. I have a xsl form that I would like to toggle or show/hide a section when a specific value is selected or present on the form. I'm limited to JavaScript and I appreciate all the help.

1. When user selects option, hidden div section shows and
2. When form is loaded and that value is present, div section shows

Here is the sample HTML I would like to work from to figure this out:

<select name="sbFruit" id="sbFruit" style="display:none;" title="Select your Fruit">
  <xsl:variable name="sbFruit" select="Fruit" />
  <xsl:for-each select="document('FRUIT_Lookups.xml')/lookups/FruitTypes/Fruit">
    <xsl:variable name="optFruit" select="value" />
    <option>
      <xsl:if test="$sbFruit = $optFruit">
        <xsl:attribute name="selected">true</xsl:attribute>
      </xsl:if>
      <xsl:attribute name="value">
        <xsl:value-of select="value"/>
      </xsl:attribute>
      <xsl:value-of select="value"/>
    </option>
  </xsl:for-each>
</select>

<!-- Toggled Group when 'sbFruit' = Orange -->
<div id="AppleSubGroup" name="AppleSubGroup" style="display: none;>"
  <label id="Orange_Fresh">Is the Orange Fresh?</label>
  <input name="Fresh" type="radio" value="Yes" />Yes
  <input name="Fresh" type="radio" value="No" />No
  <br />
  <label id="Orange_moldy">Is the Orange moldy?</label>
  <input name="Red" type="radio" value="Yes" />Yes
  <input name="Red" type="radio" value="No" />No
</div>

XML Fruit Choices:

Apple
Blueberry
Orange
Pear

or Simple HTML Version:

<select id="sbFruit" name="sbFruit">
  <option>Apple</option>
  <option>Blueberry</option>
  <option>Orange</option>
  <option>Pear</option>
</select>

<!-- Toggled Group when 'sbFruit' = Orange -->
<div id="AppleSubGroup" name="AppleSubGroup" style="display: none;>"
  <label id="Orange_Fresh">Is the Orange Fresh?</label>
  <input name="Fresh" type="radio" value="Yes" />Yes
  <input name="Fresh" type="radio" value="No" />No
  <br />
  <label id="Orange_moldy">Is the Orange moldy?</label>
  <input name="Red" type="radio" value="Yes" />Yes
  <input name="Red" type="radio" value="No" />No
</div>

Thanks for helping!

Answer 1

Using jQuery and the HTML version this should be very easy. You assign a handler that checks if the option is checked, and if it is, show or hide the div.

$("select[name='sbFruit']").change(function(event) {
    if ($(this).val() == 'Orange') {
        $('#OrangeSubGroup').hide();
    } else {
        $('#OrangeSubGroup').show();
    }
}).trigger('change');

The .trigger('change') makes sure the check is done on load too. How it'd be for the XML form, I don't know. It might work with this code.

Answer 2

Check out this fiddle and see if this is what you need. It is a very basic version but still does the work.

Basically, you need to do the following:

1. Assign a value attribute to all your options (say AppleSubGroup for the option Apple). The value assigned for each option must match the ID of the Div which has contents related to it. Else this won't work.
2. Specify two classes namely hidden and visible with rules as display:none and display:block respectively. This when assigned to your sub groups will show/hide them.
3. Write a JS function to assign the hidden/visible classes to the sub groups based on selection. I am assuming you want a JS only version (if you are ok with jQuery, refer to Ambroos' answer)
4. Invoke this function on page load using window.onload = showHide;. This will set the sub group corresponding to the default selected value as visible on page load.
5. Add the onChange="showHide();" attribute to your select tag. This will invoke the function every time the selection is modified.

Note: I have added a wrapper div with id="SubGroup" to your sub groups section.

window.onload = showHide;

function showHide(){
    var el = document.getElementById("sbFruit");
    var selectedVal = el.options[el.selectedIndex].value;
    var subGroupEl = document.getElementById("SubGroup").getElementsByTagName("div");
    for(var i=0; i<subGroupEl.length; i++){
        subGroupEl[i].className = "hidden";
    }
    document.getElementById(selectedVal).className = "visible";
}