# 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](/docs/platform/aura-platform/guide/components-conditional-markup.md).

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

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

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

```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](/docs/platform/aura-platform/guide/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](/docs/platform/aura-platform/guide/js-client-side-controller.md)
- [Component Attributes](/docs/platform/aura-platform/guide/components-attributes.md)
- [Adding and Removing Styles](/docs/platform/aura-platform/guide/js-cb-styles.md)