Hi All,
I was doing some poc for my work and I encountered with a weird problem. On the selection of radio button value I want to rerender the output panel below (based upon the selected radio button value) but it is not functioning well.
I know I'm doing some silly mistake but not able to recognize. Here is my code :-

VF Page
------------------------------------------------------------------------

<apex:page Controller="TestPage_Class">
    <apex:form >
        <apex:selectRadio id="selectedContact" value="{!selectedValue}">
             <apex:selectOptions value="{!listSelectedContact}"/>                                        
             <apex:actionSupport event="onchange" reRender=" outerOutputP1, outerOutputP2" status="status" action="{!selectOnClick}"/>
        </apex:selectRadio> 
        
        <apex:actionstatus id="status">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
                       height: 100%;opacity:0.65;width:100%;"> 
                    <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                        <span class="waitingDescription">Please Wait...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>
    
        <apex:outputPanel id="outerOutputP1">
            <apex:outputPanel id="innerOutputP1" rendered="{!op1}">
                <apex:outputLabel > Output Panel 1</apex:outputLabel>
            </apex:outputPanel>
        </apex:outputPanel>
        
        <apex:outputPanel id="outerOutputP2">
            <apex:outputPanel id="innerOutputP2" rendered="{!op2}">
                <apex:outputLabel > Output Panel 2</apex:outputLabel>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:form>
</apex:page>

Controller Class :-
------------------------------------------------------------------------------------------

public class TestPage_Class {
    public String selectedValue {get; set;}
    public Boolean op1 {get; set;}
    public Boolean op2 {get; set;}
    
    public List<SelectOption> getlistSelectedContact() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('Value1','Output Panel 1')); 
        options.add(new SelectOption('Value1','Output Panel 2')); 
        return options; 
    }
    
    public PageReference selectOnClick() {
        if(selectedValue=='Value1') {
            op1 = true;
            op2 = false;
        } else {
            op1 = false;
            op2 = true;
        }
        return null;
    }
}

Please try to understand this code and provide me a solution.

Thanks in advance.