function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Swathi V 25Swathi V 25 

Based on the radio button selected additional options should be displayed/hidden

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

User-added image

Thanks in advance

V Swathi

Best Answer chosen by Swathi V 25
GauravGargGauravGarg
Hi Swati, 

Please try below updated code:
 
Component:

<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>
    <div class="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>        
    </div>
    
    <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>
    <div 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>        
    </div>
</aura:component>
 
JS controller:

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

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

It is working fine at my end. 

Hope this helps. 

Thanks,
Gaurav
Skype: gaurav62990

All Answers

GauravGargGauravGarg
Hi Swati,

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

I have put additional space between toggle and this.

Thanks,
Gaurav
 
Swathi V 25Swathi V 25
Thanks Gaurav for your reply. But it did not work.
GauravGargGauravGarg
Hi Swati, 

Please try below updated code:
 
Component:

<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>
    <div class="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>        
    </div>
    
    <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>
    <div 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>        
    </div>
</aura:component>
 
JS controller:

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

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

It is working fine at my end. 

Hope this helps. 

Thanks,
Gaurav
Skype: gaurav62990
This was selected as the best answer
Swathi V 25Swathi V 25
Thanks Gaurav.  
It is working. I really appreciate your help. I just have couple of questions to clarify. In the CSS what is the significance of using the color red and blue and is there a way to create these two variables as global and not create them multiple times. I haved added your skype ID and please accept the same.  

Thanks once again for your help.

V Swathi
GauravGargGauravGarg
Hi Swathi,

I have just added these two to differentiate between two different lines to be rendered. 

Please mark the answer as best answer for future references. 

Thanks,
Gaurav