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;
}