Lightning Components Developer’s Guide
jNewer Version Available
Dynamically Showing or Hiding Markup
Use CSS to toggle markup visibility. You could use the <aura:if> or <aura:renderIf> tags to do the same thing but we recommend using CSS as it’s the more standard approach.
This example uses $A.util.toggleClass(element, 'class') to toggle visibility of markup.
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:toggleCss-->
18<aura:component>
19 <ui:button label="Toggle" press="{!c.toggle}"/>
20 <p aura:id="text">Now you see me</p>
21</aura:component>1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*toggleCssController.js*/
18({
19 toggle : function(component, event, helper) {
20 var toggleText = component.find("text");
21 $A.util.toggleClass(toggleText, "toggle");
22 }
23})1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*toggleCss.css*/
18.THIS.toggle {
19 display: none;
20}Click the Toggle button to hide or show the text by toggling the CSS class.