Issue with radio button not hiding page block panels

Question

I have a visual force page which has 2 radio buttons. Based on clicking a value on the radio button, i want one page block panel to be displayed and another one is hidden. The problem is the yes option does not work but the no option displays the right panel. The yes option does not display the yesidspan section but the no works and displays the noidspan. What am i missing on this ? My goal is to display yesidspan if they click yes and noidspan if they click no.

Code below

<apex:page standardController="ActiveChecklistLineItem__c" extensions="CorrectiveActionController" >
  <apex:form > 
      <apex:pageBlock id="trainersBlock">

          <apex:pageBlockSection >
            <apex:pageBlockSectionItem id="pgBlockSectionitem">
                <apex:outputText value="Please select corrective action?" />
                <apex:selectRadio id="idRadio1" value="{!selectedRadioValue}" onclick="boolFunction(this);"  >
                    <apex:selectOption itemValue="true" itemLabel="Yes" />
                    <apex:selectOption itemValue="false" itemLabel="No" />
                </apex:selectRadio>
            </apex:pageBlockSectionItem>
          </apex:pageBlockSection>

              <span id="YesidSpan" style="display:none">
              <apex:pageBlock>
                  <apex:pageBlockSection >
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="To:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                        <apex:inputText label="to email" maxlength="10" /> 
                      </apex:pageBlockSectionItem>
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="cco:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                        <apex:inputText label="cc email" maxlength="10"/> 
                      </apex:pageBlockSectionItem>
                      <apex:pageBlockSectionItem >
                          <apex:inputTextarea value="{!emailDesc}"/>
                      </apex:pageBlockSectionItem>
                  </apex:pageBlockSection>
              </apex:pageBlock>
          </span>

          <span id="NoidSpan" style = "display:none">
               <apex:outputPanel id="NoCorrectiveAction" >
                  <apex:pageBlockSection >
                      <apex:pageblockSectionItem >
                            <apex:outputlabel value="Issue Description:"/>
                      </apex:pageblockSectionItem>
                      <apex:pageBlockSectionItem >
                          <apex:inputTextarea value="{!issueDesc}"/> 
                      </apex:pageBlockSectionItem>

                  </apex:pageBlockSection>
              </apex:outputPanel>
          </span>

          <apex:pageBlockButtons location="bottom">
            <apex:commandButton value="Submit" action="{!redirectToChecklistPage}" />

        </apex:pageBlockButtons>
      </apex:pageBlock>
  </apex:form>

<script> 
        function boolFunction(variable)
        {
            var bool = variable.value;
            if(bool == 'true')
            {
                document.getElementById('YesidSpan').style.display = 'block';
                document.getElementById('NoidSpan').style.display = 'none';
                //alert('yes clicked');
            }
            else
                document.getElementById('NoidSpan').style.display = 'block';
                document.getElementById('YesidSpan').style.display = 'none';
        }   
    </script>   
</apex:page>

Answer 1

You missed the brackets for else part. The line document.getElementById('YesidSpan').style.display = 'none'; is outside of if else part and is always executed irrespective of the true false value. That's why it is not working as expected.

Please update the code as mentioned below by putting {..} around else block. Hope it will solve your problem.

New Code

    function boolFunction(variable)
    {
        var bool = variable.value;
        if(bool == 'true')
        {
            document.getElementById('YesidSpan').style.display = 'block';
            document.getElementById('NoidSpan').style.display = 'none';
            //alert('yes clicked');
        }
        else
        {
            document.getElementById('NoidSpan').style.display = 'block';
            document.getElementById('YesidSpan').style.display = 'none';
        }
    }

Old Code

function boolFunction(variable)
{
    var bool = variable.value;
    if(bool == 'true')
    {
        document.getElementById('YesidSpan').style.display = 'block';
        document.getElementById('NoidSpan').style.display = 'none';
        //alert('yes clicked');
    }
    else
        document.getElementById('NoidSpan').style.display = 'block';
        document.getElementById('YesidSpan').style.display = 'none';
}