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.

<!--c:toggleCss-->
<aura:component>
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>
/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    }
})
/*toggleCss.css*/
.THIS.toggle {
    display: none;
}

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.