Dynamically Adding/Removing CSS in Nested Div

Question

I'm trying to hide a div dynamically. This works for me. But when I try to do a nested div. It suddenly doesnt work anymore. Am I missing something?

Component(Working)

<ui:button label="Toggle" press="{!c.toggle}"/>
<div aura:id="text">Now you see me</div>

Component(Not Working)

<ui:button label="Toggle" press="{!c.toggle}"/>
<div>
    <div aura:id="text">Now you see me</div>
</div>

Controller

toggle : function(component, event, helper) {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    },

Style

.THIS.toggle {
    display: none;
}

Answer 1

When styling lightning components, there needs to be a space between .THIS and the CSS classs for non-top-level elements. If you want the class toggle to work for both situations, you could add the non-top-level case to your CSS file:

.THIS.toggle {
    display: none;
}

.THIS .toggle {
    display : none;
}