Dynamically Showing or Hiding Markup

You can show or hide markup when a button is pressed.

Component source

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <aura:attribute name="visible" type="Boolean" default="false" />
3    
4    <br/>
5    
6    <p>Click the button to see toggling at its best!</p>
7    
8    <br/>
9
10    <aura:renderIf isTrue="{!v.visible}">
11        <p>Now, you see me!</p>
12    </aura:renderIf>
13
14    <ui:button label="Toggle Markup Visibility" press="{!c.showHide}"/>
15        
16</aura:component>
17

Client-side controller source

1swfobject.registerObject("clippy.codeblock-1", "9");({
2    showHide: function(cmp) {
3        var isVisible = cmp.get("v.visible"); 
4        // toggle the visible value
5        cmp.set("v.visible", !isVisible);
6    }
7})
8

Let's look at the Component source to see how this works. We added an attribute called visible to control whether the markup is visible. It's set to false by default so that the markup is not visible. Under the covers, there are no DOM elements created for the markup.

The aura:renderIf tag selectively display the markup in its body if the visible attribute evaluates to true.

The ui:button triggers the showHide action in the client-side controller. It simply toggles the value of the visible attribute.