Lightning Aura Components Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
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;
}Add the c:toggleCss component to an app. To hide or show the text by toggling the CSS class, click the Toggle button.