Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
App Overview
Designing App UI
Creating App Templates
Developing Secure Code
Styling Apps
Using JavaScript
JavaScript Cookbook
Dynamically Creating Components
Detecting Data Changes
Finding Components by ID
Dynamically Adding Event Handlers
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Using Apex
Controlling Access
Using Object-Oriented Development
Caching with Storage Service
Using the AppCache
Distributing Applications and Components
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Dynamically Showing or Hiding Markup

Use CSS to toggle markup visibility. You could use the <aura:if> tag to do the same thing but we recommend using CSS as it’s the more standard approach.

This example uses $A.util.toggleClass(cmp, 'class') to toggle visibility of markup.

1<!--c:toggleCss-->
2<aura:component>
3    <ui:button label="Toggle" press="{!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}

Click the Toggle button to hide or show the text by toggling the CSS class.