1

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 instructed.

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

salesforce developer article

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;
  }
4
  • 1
    If you're using SLDS, you can just use slds-hide instead.
    – sfdcfox
    Sep 7, 2018 at 20:12
  • sfdcfox if using SLDS, would the syntax be written as such? .THIS.toggle { slds-hide; }
    – rouqeOne
    Sep 8, 2018 at 6:31
  • 1
    $A.util.toggleClass(toggleText, "slds-hide"); ... no custom css necessary.
    – sfdcfox
    Sep 8, 2018 at 6:34
  • @sfdcfox ok got it, something like this in the js controller: '({ toggle : function(component, event, helper) { var toggleText = component.find("text"); $A.util.toggleClass(toggleText, "slds-hide"); } })' and added the slds-hide to a div in the component.
    – rouqeOne
    Sep 8, 2018 at 23:15

1 Answer 1

4

There seems to be an issue in the example. For this to work, the CSS actually needs to be as below:

.THIS.toggle {
    display: none;
}

Notice there's no space between .THIS and .toggle. The reason for this being that the CSS is being applied at the top level component (a para in this case) and not any nested component.


If you want to use the CSS as-is provided in the documentation's example, you will just need to wrap the para tag inside a div so that the CSS then is applied on a nested (para) component. So your component code will look something as below.

<div>
  <p aura:id="text">Now you see me</p>
</div>
3
  • Jayant that was it, I don't remember reading this anywhere, but do you have a reference we can post here? If not, thank you very much!
    – rouqeOne
    Sep 8, 2018 at 6:07
  • 1
    I have come across this page multiple times but never noticed it until you posted that. It’s an issue in the documentation that should be updated by Salesforce. If at all you want to use the CSS in as-is form (with a space), just wrap the para tag within a div and it will work.
    – Jayant Das
    Sep 8, 2018 at 13:47
  • 1
    @rouqeOne I reached out to Salesforce Docs’ twitter handle and got a confirmation that they will be correcting this in the sample in a week’s time.
    – Jayant Das
    Sep 19, 2018 at 1:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .