Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Dynamically Showing or Hiding Markup

You can use CSS to toggle markup visibility. However, <aura:if> is the preferred approach because it defers the creation and rendering of the enclosed element tree until needed.

For an example using <aura:if>, see Best Practices for Conditional Markup.

This example uses $A.util.toggleClass(cmp, 'class') to toggle visibility of markup.

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

1/*toggleCssController.js*/
2({
3    toggle : function(component, event, helper) {
4        var toggleText = component.find("text");
5        $A.util.toggleClass(toggleText, "toggle");
6    }
7})

1/*toggleCss.css*/
2.THIS.toggle {
3    display: none;
4}

There’s no space in the .THIS.toggle selector because we’re using the rule to match a <p> tag, which is a top-level element. For more information, see CSS in Components.

Note

Add the c:toggleCss component to an app. To hide or show the text by toggling the CSS class, click the Toggle button.

Lightning Aura Components Developer Guide

Dynamically Showing or Hiding Markup

See Also