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; }
Click the Toggle button to hide or show the text by toggling the CSS class.