function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
HNT_NeoHNT_Neo 

Dynamically Showing or Hiding Markup

I've followed the documentation from the Lightning Components Developer Guide on Dynamically Showing or Hiding Markup using a component, js controller and style elements. I was able to place the button on my lightning home page, however, when I click the button, the sample text does not disappear as shown. 

Has anyone run into this problem or is there something missing that wouldn't toggle the sample text provided?

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_show_hide_markup.htm

Component 
<!--c:toggleCss-->
<aura:component>
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>

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

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

 
Best Answer chosen by HNT_Neo
HNT_NeoHNT_Neo
Figured out what the issue was in original post. Need to remove the space between .THIS and .toggle 
.THIS.toggle {
       display: none;
}
However, I did use your modified version of the js controller

All Answers

JayeeJayee
HI JH
I think this is easiest way to toggle in controller. 
({
    toggle : function(component, event, helper) {
	var toggleDetect = component.get('v.toggleState');
        if(!toggleDetect){
            component.set('v.toggleState',true);

        }else{
            component.set('v.toggleState',false);
         
        }
            
    }
   
})

component 
<aura:component>
    <!--you should add toggle boolean attribute for onclick detect-->
    <aura:attribute name="toggleState" type="boolean" default="false"/>
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>

    <aura:if isTrue="{!v.toggleState}">
    <p aura:id="text">Now you see me</p>
    </aura:if>

</aura:component>

 
JayeeJayee
You mean this toggle class document?
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_show_hide_markup.htm#js_cb_show_hide_markup
It doesnt work for me too
It seems need to be fixed.
HNT_NeoHNT_Neo
Jayee, 
Tried your method, but didn't work either. 

When loaded, this shows up, but clicking the button doesn't make the text, Today's Messages, dissappear. 
User-added image
HNT_NeoHNT_Neo
Figured out what the issue was in original post. Need to remove the space between .THIS and .toggle 
.THIS.toggle {
       display: none;
}
However, I did use your modified version of the js controller
This was selected as the best answer