Hi All,

I have two radio buttons for selection.  Based on the radio button selected, I need to show up additional options for selection.  Currently by default, I am hiding the additional options using CSS.  When selecting the first radio button it shows up the additional options for the first radio buttion, but when i select the second radio button, ideally the first radio button's additional options should hide and the second radio button additional options should display.  But the first radio button's additional options are not hiding.

I have pasted the component, JS controller and CSS code for reference and would appreciate your help Please let me know if my approach is correct or suggest me a better way to handle this scenario


Component code is as follows 

<!--c:toggleCss-->
<aura:component >
    <fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
        <div class="slds-form-element__control">
            <span class="slds-radio">
                <input type="radio" id="radio-1" name="options" value="on"/>
                <label class="slds-radio__label" for="radio-1" onclick="{!c.toggle}">
                    <span class="slds-radio_faux" aura:id="radio-1"></span>
                    <span class="slds-form-element__label">show all time charges awaiting my review</span>
                </label>
            </span>            
        </div>
    </fieldset>
    <fieldset class="slds-form-element toggle" aura:id="ShowOptions">        
        <span class="slds-radio">
            <input type="radio" id="radio-1a" name="addoptions" value="on" />
            <label class="slds-radio__label" for="radio-1a">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">show Unapproved only</span>
            </label>
        </span>
        <span class="slds-radio">
            <input type="radio" id="radio-1b" name="addoptions" value="on" />
            <label class="slds-radio__label" for="radio-1b">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">show all time charges</span>
            </label>
        </span>        
    </fieldset>
    
    <fieldset class="slds-form-element">
        <div class="slds-form-element__control">
            <span class="slds-radio" aura:id="radio-2" >
                <input type="radio" id="radio-2" name="options" value="on"/>
                <label class="slds-radio__label" for="radio-2" onclick="{!c.toggle1}">
                    <span class="slds-radio_faux" ></span>
                    <span class="slds-form-element__label">show all time charges to be review by</span>
                </label>
            </span>            
        </div>
    </fieldset>
    <fieldset class="slds-form-element toggle1" aura:id="ShowOptions1">        
        <span class="slds-radio">
            <input type="radio" id="radio-2a" name="addoptions" value="on" />
            <label class="slds-radio__label" for="radio-2a">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">show Unapproved only</span>
            </label>
        </span>
        <span class="slds-radio">
            <input type="radio" id="radio-2b" name="addoptions" value="on" />
            <label class="slds-radio__label" for="radio-2b">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">show all time charges</span>
            </label>
        </span>        
    </fieldset>
</aura:component>

JS controller code is as follows

/*toggleCssController.js*/
({
   toggle : function(component, event, helper) {
        var toggleText = component.find("ShowOptions");
        $A.util.toggleClass(toggleText, "toggle");
    },
    toggle1 : function(component, event, helper) {
        var toggleText1 = component.find("ShowOptions1");
        $A.util.toggleClass(toggleText1, "toggle1");        
    }
})

CSS as foloows 

/*toggleCss.css*/
.THIS.toggle {
    display: none;
}
.THIS.toggle1 {
    display: none;
}

Screenshot



Thanks in advance

V Swathi