---
schema_version: "1"
id: 56dc8bcadf95106472ad58fb2a370d3cc9acddcd29b4630b0b53b509f1dd422c
title: Dynamically Showing or Hiding Markup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/js-cb/js-cb-show-hide-markup.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/js-cb-show-hide-markup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 7bd17f2894dce11b0a7bd8284e649322e7585de470eb363f14d9f1764e285071
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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](https://developer.salesforce.com/docs/platform/aura-platform/components/components-conditional-markup.md).

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

<!-- otherprops: set_clipboard -->
```nolang
<!--c:toggleCss-->
<aura:component>
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>
```

<!-- otherprops: set_clipboard -->
```javascript
/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    }
})
```

<!-- otherprops: set_clipboard -->
```nolang
/*toggleCss.css*/
.THIS.toggle {
    display: none;
}
```

**note:** There’s no space in the `.THIS.toggle` selector because we’re using the rule to match a `<p>` tag, which is a top-level element. For more information, see [CSS in Components](https://developer.salesforce.com/docs/platform/aura-platform/components/components-css.md).

Add the `c:toggleCss` component to an app. To hide or show the text by toggling the CSS class, click the **Toggle** button.

**See Also**  


-   [Handling Events with Client-Side Controllers](https://developer.salesforce.com/docs/platform/aura-platform/js/js-client-side-controller.md)
-   [Component Attributes](https://developer.salesforce.com/docs/platform/aura-platform/components/components-attributes.md)
-   [Adding and Removing Styles](https://developer.salesforce.com/docs/platform/aura-platform/guide/js-cb-styles.md)