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>