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